HTML (Hypertext Markup Language) is the standard markup language used to create web pages and web applications. It uses tags to structure and present content on the web, allowing text to be styled, images to be included, and other elements like lists, tables, and forms to be added to pages. Key HTML tags include headings, paragraphs, links, images, lists, tables, and divs for organizing and laying out content.
16. Tags
<p>This paragraph has some <strong>bold
information</strong> in it.</p>
In the browser, this markup will look like:
This paragraph has some bold information in it.
18. Nested tags
<div id="content">
<p>This paragraph has some <strong>bold
information</strong> in it.</p>
</div>
• Tags take a hierarchical, parent-child
structure
19. The DOM
• Document Object Model
• Represents the nested structure of an
HTML document
• Tree structure -- think family tree
body
h1 ul div
p
strong
33. Set-up
• Put the HTML into a text file using Text
Wrangler, or the text editor of your
choice.
• In Firefox, choose "File > Open File" and
open your HTML page.
40. Exercise
Create an outline in your HTML using headings and
paragraph tags.
Examples:
•Table of Contents
•Proposal
•Presentation Notes
41. Links
• <a>
• The most important tag!
Link Text
href URL
What the link looks
Hyperlink Reference Name of file to link to
like in the browser
42. Links
• <a>
• The most important tag!
<a href="page.html">Go to page</a>
Link Text
href URL
What the link looks
Hyperlink Reference Name of file to link to
like in the browser
50. Attributes
Extra information inside a tag, as in <a> and <img>
<a href="page.html">Go to page</a>
<img src="cats.jpg" />
<p class="highlight">My paragraph.</p>
51. Attributes
Extra information inside a tag, as in <a> and <img>
<a href="page.html">Go to page</a>
<img src="cats.jpg" />
<p class="highlight">My paragraph.</p>
<div id="navigation">My navigation</div>
52. Inline vs. Block
Elements
• Block-level elements begin a new line in the
flow of a page.
• Inline elements stay in the current flow of
the page without breaking a line.
Block Inline
<p> <img>
<h1> <strong>
<table> <em>
<div> <span>
53. Lists
• <ol> : Ordered list, usually with numbers
• <ul> : Unordered list, with bullets
• <li> : List item -- each item in list
• <ul> or <ol> tags wrap a set of <li> tags
61. The <div> tag
• Used to group elements semantically, by
topic
• Useful for layout with CSS
• Will usually have an id or class attribute to
identify it
62. Using <div>
Divs identify
sections of the
document
63. The <span> tag
• Like div, helps organize code
• Inline element
• Used for smaller pieces of code than div
64. The <span> tag
• Like div, helps organize code
• Inline element
• Used for smaller pieces of code than div
<p>Some of <span class="highlight">this
text</span> is not like the other</p>