Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML / CSS – Basics Why the heck are we doing this?

Similar presentations


Presentation on theme: "HTML / CSS – Basics Why the heck are we doing this?"— Presentation transcript:

1 HTML / CSS – Basics Why the heck are we doing this?

2 HTML HyperText Markup Language

3 CSS Cascading Style Sheets

4 Reasons to learn HTML and CSS HTMLCSS Content Presentation Structure Layout / Design I have some content, how do I structure it? I have the content and the structure, how do I make it look good? Appreciate the logic in this. Change the look of everything efficiently.

5 HTML Document – Basic Structure You always need this: Start of document Start of Head End of Head Start of Body End of Head End of document

6 HTML – Source and Surface Source code What the browser displays is actually:

7 Rules Always close tags. Always! No matter what. Some tags can not be nested in others. A nested tag must be closed before a parent tag is closed.

8 HTML – Basic tags a paragraph heading of the first order - more headings an unordered list an ordered list a list item the anchor tag an image object

9 HTML – Hierarchy

10 HTML – Hierarchy

11 HTML – Hierarchy

12 HTML – Basic attributes Some Text the hypertext reference, turning “Some Text” into a link an image object is not complete if the source is not given and an alternative text is missing

13

14 Absolute vs. Relative Links Some Text an absolute reference Some Text a relative reference

15 Relative links revisited Some Text file in the same directory Some Text file in a sub-directory called pages

16 Relative links revisited 2 Some Text file in the parent directory Some Text file in a sub-directory of the parent directory dw

17 HTML – Special tags a division special segments make it bold make it italics line break horizontal line a block of quote

18 Want more? http://www.addedbytes.com/ cheat-sheets/html-cheat-sheet/ http://www.selfhtml.org/ http://www.w3schools.com/html/

19 Want more? http://www.addedbytes.com/ cheat-sheets/html-cheat-sheet/ http://www.selfhtml.org/ http://www.w3schools.com/html/ For those of you not good at remembering stuff.

20 Want more? http://www.addedbytes.com/ cheat-sheets/html-cheat-sheet/ http://www.selfhtml.org/ http://www.w3schools.com/html/ For those of you who want to know all the details.

21 Want more? http://www.addedbytes.com/ cheat-sheets/html-cheat-sheet/ http://www.selfhtml.org/ http://www.w3schools.com/html/ For those of you who like to try out things.

22 Want more? http://www.addedbytes.com/ cheat-sheets/html-cheat-sheet/ http://www.selfhtml.org/ http://www.w3schools.com/html/


Download ppt "HTML / CSS – Basics Why the heck are we doing this?"

Similar presentations


Ads by Google