HTML Basics - Roosevelt CS & Web Design · HTML Basics Tag Structure Page Structure Document Tags Content Tags References 2

HTML Basics

1

HTML Basics

Tag StructurePage StructureDocument TagsContent TagsReferences

2

Tag StructureEnclosed in angle brackets: <tag>Most are paired: <tag> ... </tag>Some are single: <tag />Tag has element and optional attributeTag element: <name>Tag attribute: <name attribute=”value”>

3

Tag Examples

Pairs enclose content: <h1>Heading</h1>Single ones just do something: <br />Tag with attribute: <img src=”image.jpg” />

4

Page Structure

5

<html>

<head><title>Page Title</title>

</head>

<body>page contents

</body>

</html>

Document Tags

<html> ... </html> <head> ... </head><title> ... </title><body> ... </body>

6

Page language Page headWindow titlePage body

Content TagsHeadings Rules & BreaksText StyleGroupingsListsImages & LinksTables

7

<h1>, <h2>, ... <h6><hr />, <br /><p>, <strong>, <em><span>, <div><ol>, <ul>, <li><img src=”file”>, <a href=”url”><table>, <tr>, <th>, <td>

Referencesrooseveltcs.org/courses/web-design/resources

HTML Cheat SheetHTML Reference ListHTML Color Picker

www.w3schools.com/htmlMany tutorials & examples

8

http://rooseveltcs.org/courses/web-design/resources/

http://rooseveltcs.org/courses/web-design/resources/

http://www.w3schools.com/html/

http://www.w3schools.com/html/

Documents

HTML Basics - Roosevelt CS & Web Design · HTML Basics Tag Structure Page Structure Document Tags Content Tags References 2