Download presentation
Presentation is loading. Please wait.
1
Creating Web Pages with HTML 5
Introducing HTML 5 Creating Web Pages with HTML 5
2
The Structure of an HTML File
DOCTYPE tag <!DOCTYPE html> HTML tag <html></html> Root element Can have only one root element Head element <head></head> Contains information about the document Can contain meta elements Instructions in this section are done before the page is displayed and remains in memory. Body element <body></body> Contains content to be displayed in the Web page Sequential process of each line <!DOCTYPE html> <html> <head> <title></title> </head> <body> content </body> </html>
3
HTML Declaration HTML 4.0 Declaration
DOCTYPE declares the standards needed for proper interpretation and syntax checking by the browser. 3 standard modes: Transitional allows the use of the deprecated tags Frameset allows both the use of deprecated tags and the use of frames Strict prohibits the use of any of the deprecated tags <!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Transitional//EN” 1-transitional.dtd> <html xmlns = HTML 5 Declaration <! DOCTYPE html>
4
<head> tags <head> tags are elements that provide information about the page – not the pages content <title></title> - describes content of page and used by search engines for SEO <meta></meta> - provides metadata – information about the content <link></link> - specifies a file that should be linked to the web page - not a link that is clicked <script></script> - contains script, not HTML nor CSS <style></style> - CSS styles
5
Title tag Title element <title></title>
Required element of head element Specifies page title that is displayed in title bar of a user’s Web browser Web document can only have one Utilized by search engines Should include topic of web site. <head> <title> My cool web page</title> </head>
6
<body> tags <body> tags are elements that contain the pages content All other tags are inside the opening an closing body tags <body> …all other tags </body>
7
Creating Links A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. <a> tag defines a hyperlink. The most important attribute of the <a> element is the href attribute, which indicates the link’s destination. By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red SYNTAX Mark content with a container <a> tag: <a href="url">content</a> EXAMPLE <a href=" Products</a>
8
Comments Comment Tag Used to add notes with the code
<!-- Chemistry Class Web Page Created for Robert Service High School -->
9
Element Attributes Provide browsers with additional information about how to treat/refine them Attributes Inserted into element’s opening tag using the syntax attribute1=“some value" attribute2=“some value“ <img src=“picture.gif” id=“picture1” />
10
Inline tags <b> <i> <u> Nesting
The technique of placing one element within another Pairs of tags must match Must have matching closing tags
11
White space and HTML White space Browsers
Blank spaces, tabs, and line breaks within the file by default are displayed either as a single space or ignored. To display spacing, use block-level tags or use non-breaking space. Browsers See no difference between a blank space, a tab, and a line break
12
Creating Headings Headings Syntax to mark a heading element
Titles placed within the page body HTML supports six heading elements, numbered h1 through h6 <h1> defines the most important heading. <h6> defines the least important heading. Syntax to mark a heading element <hn>content</hn>
13
Creating Paragraphs Paragraphs To mark content as a paragraph
Another popular block-level element To mark content as a paragraph <p>content</p> The <p> tag starts a new line with a blank space above it, separating the new paragraph from the preceding element.
14
Creating an HTML Document
Element A distinct feature of a document Each feature is marked within the HTML file with a tag Tags are either Container tags or Empty tags Container tags: Have an Opening tag (<p>) and a closing tag (</p>) Meaning that the paragraph tag effects everything contained between the open and closing tags only. Self closing tags Have no content the opening tag closes itself <img src=“images/teapot.jpg” width=“96” alt=“” /> <br /> Note: There is a space between “br” and “/”.
15
Attributes Tell more about an element
Appear INSIDE the opening tag only Some attributes are global attributes Some attributes are core attributes (most likely to use) id class title lang
16
HTML5 compliant code Tags and attribute names in lowercase, <body> instead of <BODY> Closing tags are required, i.e., a paragraph item must be coded <p>here are lists of my items</p>. Empty tags must be closed, i.e., <hr> must be coded <hr />. Attributes must be assigned a value, for instance the attribute to designate which image to display must be coded as src = “dog.jpg” Attribute values must be in quotes. Example: align = “center”
17
HTML5 compliant code Correct nesting. Closing tags always appear in reverse order of the opening tags. The alt attribute is required for all images and should be assigned a meaningful description - if none exists, may be assigned with empty quotes. alt = “Sally Jones, Professor” alt = “ “ (Used in the case of decorative graphics)
18
Working with Block-level Elements
Elements are either Block-level, Inline, or Structural Block-level elements Contains content displayed in a separate section within the page Examples: headings <h1>, Paragraphs <p>, lists <ul>, tables <table>, divisions <div>, and spans <span> Note: DIV and SPAN are grouping tags Inline elements Placed within block-level elements Not separated from other page content Examples: Italics <i> and bold <b>
19
Creating Headings Headings Syntax to mark a heading element
Titles placed within the page body HTML supports six heading elements, numbered h1 through h6 <h1> defines the most important heading. <h6> defines the least important heading. Syntax to mark a heading element <hn>content</hn>
20
Creating Paragraphs Paragraphs To mark content as a paragraph
Another popular block-level element To mark content as a paragraph <p>content</p> The <p> tag starts a new line with a blank space above it, separating the new paragraph from the preceding element.
21
Creating Lists HTML supports three kinds of lists:
an ordered list, which is used to display information in a numeric order an unordered list, which list items are not listed in a particular order i.e. bullets a definition list, which is a list of terms, each followed by a definition line that is typically indented slightly to the right
22
Ordered Lists “option” specifies the type of character used to number the list of items: “1” displays with numbers (default) “a”, “A” displays either lowercase or uppercase letters. “i”, “I” displays Roman numerals < ol type = “option”> <li> Item1 </li> <li> Item2 </li> </ol> Output to the page Conceptual Chemistry Chemistry Advanced Placement Chemistry Conceptual Chemistry Chemistry Advanced Placement Chemistry
23
Unordered Lists “option” specifies the type of symbol used to display the list of items: “disc” (default) “square” “circle” < ul type = “option”> <li> Item1 </li> <li> Item2 </li> </ul> Output to the page Conceptual Chemistry Chemistry Advanced Placement Chemistry Conceptual Chemistry Chemistry Advanced Placement Chemistry
24
Definition List <dl> <dt>Conceptual Chemistry </dt> <dd> An introductory course requiring basic arithematics </dd> <dt>Chemistry I</dt> <dd> An introductory course requiring solid algebra skills </dd> </dl> Conceptual Chemistry An introductory course requiring basic mathematics Chemistry I An introductory course requiring solid algebra skills
25
Block elements for special types of text
<pre></pre> Used for portions of code that are formatted with line breaks and spaces Preserves whitespace and uses a monospaced font <blockquote></blockquote> Used for quotations <address></address> Used for contact information for the development or owner of a web site
26
Block-level Elements
27
Structuring a page Generic elements Semantic elements
<div></div> - divides page content into sections that can be formatted and positioned using styles </span></span> - identifies text that can be formatted using styles Semantic elements <header></header> - top of page <section></section> - generic section of page <article></article> - composition, like a newspaper article <nav></nav> - links to other pages <aside></aside> - sidebar <footer></footer> - bottom of page
28
Inline elements Coded within a block element Those that format text:
<b></b> - bold <i></i> - italics <sub></sub> - subscript <sup></sup> - superscript Those that identify content – convey meaning <abbr></abbr> - abbreviations <cite></cite> - citations <code></code> - computer code <dfn></dfn> - definitions <em></em> - emphasis <kbd></kbd> - keyboard entries (monospaced font) <q></q> - quotations <samp></samp> - mark a sequence of characters <strong></strong> - strongly emphasized <var></var> - computer variables
29
Inline elements - continued
Semantic inline elements <hgroup></hgroup> - 2 or more headings that form a composite heading <time> </time> - date and time datetime – attribute defining the format pubdate – attribute indicating the date is the actual publication date for the article that contains the <time> element <figure></figure> - an illustration referred to from the main content of the document <figcaption></figcaption> - caption that identifies a figure
30
Special Characters Characters not represented on the keyboard, or
Characters that may have significance to the markup language. Special Characters such as <, >, and & , for example, should be represented by their character entities such as < for < > for > & for &. for a nonbreaking space (use multiple times for spacing).
31
Creating New Lines Breaks Horizontal Rules
The <br /> tag inserts a single line break. The <br /> tag is an empty tag which means that it has no end tag. This text contains<br>a line break. Horizontal Rules The <hr /> tag defines a thematic break in an HTML page (e.g. a shift of topic). The <hr /> element is used to separate content (or define a change) in an HTML page <hr />
32
Working with Images Inline images To markup an inline image
Displays a graphic image located in a separate file within the contents of a block-level element Most widely viewable in one of three file formats JPEG, GIF (proprietary), or PNG To markup an inline image <img src="url" alt="text" /> The alt attribute is used for users who do not display images.
Similar presentations
