Download presentation
Presentation is loading. Please wait.
1
Elements of HTML Web Design – Sec 3-2
Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials
2
Objectives The Student will:
Will have a basic understanding of the elements of an XHTML tags and their ordering.
3
HTML Code HTML (hypertext markup language) is the language that is used to create pages for the web. You can view the source for a web page by clicking View -> Source
4
HMTL Plain text Includes a variety of codes or "tags" that define the structure of the document, and allow documents to include headings, paragraphs, images, links, lists, tables, and other features The emerging trend in web development is to use XHTML. XHTML is a rewrite of HTML as an XML language XHTML is very similar to HTML, but has stricter rules
5
HTML Tags - Document Structure
Opening Tag Closing Tag Description <html> </html> Identifies the document as HTML. <head> </head> Identifies the header section of your document, which is used to provide information about the document for use primarily by search engines and browsers. <title> </title> The title of document. This element must be nested within the head elements. <body> </body> Contains all the visible content of a web page.
6
HTML Tags - Content (Container) Tags
Opening Tag Closing Tag Description <h1> to <h6> </h1>to</h6> Headings. H1 is the main heading, H2 is secondary, etc. <p> </p> New paragraph. <div> or <span> </div> or </span> Serve as a container for content. <em> </em> Gives the contained text emphasis (usually as italics). <strong> </strong> Makes the contained text bold.
7
HTML Tags - Content (Container) Tags
Opening Tag Closing Tag Description <a href = "document location"> </a> Link to another document. <a name = "label"> Link to another section of the same page. <ol> </ol> Makes ordered lists. <ul> </ul> Makes unordered (or bulleted) lists. <li> </li> Marks items in either the ordered or unordered list.
8
HTML Tags - Empty (Non-Container) Tags
Description <br /> Causes a line break. It may be repeated for multiple line breaks. <hr /> Horizontal rule. It creates a line to separate content. <img src ="image location" /> Inserts an image into a web page. <p /> The paragraph tag used in this manner serves as a double line break. It does not contain text. Unlike the <br /> tag it cannot be used multiple times to generate more white space.
9
HTML Tags - Table Tags Opening Tag Closing Tag Sample Attributes
Description <table> </table> Adds table. border="number" Border for rows & columns. cellpadding Thickness of cell wall. cellspacing Spacing between border and cell contents. bgcolor Background color of cells. <tr> </tr> Table row (start & end). align="left, center, right" Aligns text in row horizontally. align="top, middle, bottom" Aligns text in row vertically.
10
HTML Tags - Table Tags <th scope="row" > <th scope="col" >
Opening Tag Closing Tag Sample Attributes Description <th scope="row" > <th scope="col" > </th> When creating a table to display data, use this tag to differentiate the first row or column of cells as heading cells for all the other cells in the same column or row. Content will automatically be bold and center aligned. The scope attribute defines which data cells pertain to the heading. <td> </td> Defines data cell. colspan="number" Spans cells across column. rowspan="number" Spans cells across row. align Alignment in cell.
11
Summary HTML is the language of the web
HTML tags control how pages are displayed. Most HTML tags have a beginning and an ending tag
12
Rest of Today Using the Common HTML tags document, complete Homework 3-2 If your sheet designing your web page is not complete from yesterday, complete it and turn it in
Similar presentations
![>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.](/24/7400148/big_thumb.jpg ">> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.>")
