Web Site Design and Development Lecture 3 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM
A note on HTML elements When I refer to an HTML element, I will just use the name unless the name is only one character. For example <head> will be head <title> will be title <p> will be <p> <a> will be <a> For elements that have unique attributes, I may not list all of the attributes. Instead I will list the ones that are useful to know for now. Additional attributes will be introduced as they are needed. 2
Children of the head element As you will recall, the head element contains information about the HTML document. Elements found within the head element Title Link Meta 3
The title element The title element is a regular element that contains the title for the web page. The title element is required for valid HTML5. The title is shown in the web browser s tab and title bar. The title should be unique for every page on a web site. That unique title should describe what is on the page. Search engines use title elements in their search results. 4
Example title elements <title>my Web Site Home</title> <title>chicken Pot Pie Recipe</title> 5
The link element The link element is an empty element that is used to link the web page to another fle. Attributes rel: the relationship between the web page and the fle Common rel values stylesheet: link is to a style sheet icon: link is to a favicon (may see as shortcut icon) href: a URL pointing to the linked fle 6
What is a favicon? A favicon is the image that is shown to the left of the title in the browser s tab and bookmarks. A favicon is an image of type.ico. Favicons are typically named favicon.ico but this is not required. If you use the name favicon.ico and place the fle in your web site s root folder, you will not need to include the link element for it. 7
Example link elements <link rel= shortcut icon href= favicon.ico > <link rel= shortcut icon href= images/logo.ico > <link rel= stylesheet href= css/style.css > 8
The meta element The meta element is an empty element that is used to add additional metadata about your web page. Attributes charset: declares the character encoding used by the HTML fle name: the name of the metadata content: the content of the metadata The metadata description is used in search results. The metadata keywords used to be used by Google and Bing and may still be used by other search engines. 9
Example meta elements <meta charset= UTF-8 > <meta name= description content= The best chicken pot pie recipe that you will ever have > <meta name= keywords content= chicken, pot pie, gravy, baking > 10
Questions? 11
Children of the body element As you will recall, the body element contains the content of the web page that will be presented to the user. Within the body element, you will fnd elements related but not limited to Text Links Lists Images There are two types of elements in the body of a web page. Block: elements that exist on their own line within the web page. Inline: elements that do not require their own line 12
The heading elements The heading elements are regular block elements that are used to defne the headings on a web page. There are 6 levels of headings, they are h1, h2, h3, h4, h5 and h6. There should always be one h1 on a web page that holds the most important heading on that page. Although heading elements are not nested, the content of a web page should be laid out in a hierarchical fashion with each successive subheading being of the next level. Do not use heading elements to set text size. 13
Example heading elements and hierarchy Code In Browser <h1>types of Pets<h1> <h2>dogs</h2> <h3>breeds of Dogs</h3> <h2>cats</h2> <h3>breeds of Cats</h3> 14
The pre element The pre element is a regular block element that is used to display a preformatted block of text. Text within a pre element is displayed as it is written in the html fle. This means all whitespace is preserved. This is typically used to display a block of code 15
Example pre element Code <pre> h1 { color: blue } </pre> In Browser 16
The address element The address element is a regular block element that is used for contact information. If the address element is inside of a body element, this is the contact information for the web page s developer/owner. If the address element is inside of an article element, this is the contact information for the article s author. The address element is not to be used for arbitrary postal addresses on a web page. 17
Example address element Code <address> 412-624-8835<br> a.c.hobaugh@pitt.edu </address> In Browser 18
The <p> element The <p> element is a regular block element that is used to specify a paragraph of text. Code <p>this is a very short paragraph of text. It s only two sentences.</p> In Browser 19
The sup element The sup element is a regular inline element that is used to specify text as a superscript. Code September 4<sup>th</sup>, 2018. In Browser 20
The sub element The sub element is a regular inline element that is used to specify text as a subscript. Code H<sub>2</sub>O In Browser 21
The br element The br element is a empty inline element that is used to start a new line of text. Code This is a long line of<br> text that takes up<br> several lines. In Browser 22
The abbr element The abbr element is a regular inline element that is used to specify text as an abbreviation. Attribute title: can be used to specify what abbreviation stands for Code <abbr title= Captain >Capt.</abbr> Kirk In Browser 23
The cite element The cite element is a regular inline element that is used to specify the title of a work. Code My favorite classical work is <cite>mars, The Bringer of War</cite> by Gustav Holst. In Browser 24
The code element The code element is a regular inline element that is used to specify a segment of code. Code To defne a name variable, enter <code>var name = "Adam"</code>. In Browser 25
The dfn element The dfn element is a regular inline element that is used to specify a special term that is defned within the nearest parent element of the dfn element. If the title attribute is used, it must only contain the term being defned. Code <p><dfn>nasa</dfn> is the USA s national space agency</p> In Browser 26
The em element The em element is a regular inline element that is used to specify that the text has emphasis. Code <em>emphasized text</em> In Browser 27
The kbd element The kbd element is a regular inline element that is used to specify keyboard input. Code To confrm, enter <kbd>yes </kbd> in the text box. In Browser 28
The <q> element The <q> element is a regular inline element that is used to specify a quotation. The browser will wrap the quotation in quotes. Code <q>an investment in knowledge pays the best interest</q> - Benjamin Franklin In Browser 29
The samp element The samp element is a regular inline element that is used to specify sample output from a computer program. Code When you open the terminal you will see output like <samp> adam@adams-laptop:~$</samp> In Browser 30
The small element The small element is a regular inline element that is used to specify a side comment, like a disclaimer. Code Buy this car for $15,000 <small> tax and fees not included</small> In Browser 31
The strong element The small element is a regular inline element that is used to specify that the text is strongly emphasized. Code <strong>strongly Emphasized Text</strong> In Browser 32
The var element The var element is a regular inline element that is used to specify a computer variable. Code In order to show the date, set the <var>date</var> variable to true. In Browser 33
Questions? 34
HTML character entities Special characters and characters like < and > are entered into HTML by using character entities. A character entity starts with an & and ends with a ;. Since multiple spaces in HTML is only shown as one space in text, you can use the character entity if you want to display multiple spaces. 35
Example character entities & - & < - < > - > - π - π The complete list of character entities can be found at https://www.w3.org/tr/html5/syntax.html#named-character-references 36
Core HTML attributes In addition to the attributes mentioned in the previous HTML elements, there is a set core or global attributes that can be used on most elements. The four most commonly used core attributes: id: a unique identifier for the html element class: one or more classes, separated by spaces, that can be used by CSS. This attribute does not have to be unique. title: additional information about the element. This is shown as a tooltip in browsers for some elements. lang: the language of the content within the element this attribute is assigned to 37
Questions? 38
HTML5 semantic elements HTML5 introduced semantic elements to structure web pages. The idea behind using semantic elements is to give meaning to the HTML elements. Before the semantic elements for structure, developers would have to use generic div and span elements. Semantic elements will help search engines better understand web pages to give better results. 39
HTML5 semantic elements The main HTML5 semantic elements: Header Main Section Article Nav Aside Footer 40
The header element The header element is a regular block element that is used to specify a header for a web page or article element. Code <header> <h1>my Awesome Website</h1> </header> 41
The main element The main element is a regular block element that is used to specify the main content of a web page. This content should be unique on each web page. Code <main> <p>welcome to my awesome website.</p> </main> 42
The section element The section element is a regular block element that is used to specify a generic section of a web page. The section element does not specify a specifc type of content and can be used when there is not a more appropriate element. Code <section> <!-- some logical grouping of elements --> </section> 43
The article element The section element is a regular block element that is used to specify an article like a blog post. Code <article> <h1>welcome</h1> <p>welcome to my blog. In this blog, I will cover...</p> </article> 44
The nav element The nav element is a regular block element that is used to specify a navigation menu. Code <nav> <a>menu Item 1</a> <a>menu Item 2</a> <a>menu Item 3</a> </nav> 45
The aside element The aside element is a regular block element that is used to specify content that is related to the content near it. The aside element can be used to create a sidebar Code <main> <!-- some main content --> </main> <aside> <!-- content related to the content in main --> </aside> 46
The footer element The footer element is a regular block element that is used to specify a footer for a web page or article element. Code <footer> <p> 2018</p> </footer> 47
Other supported HTML5 semantic elements There are other HTML5 semantic elements but they are not all supported by browsers yet. Three useful elements that currently are Time Figure Figcaption 48
The time element The time element is a regular inline element that is used to specify a date or date and time in a format that the browser can parse. Attributes Datetime: date and time in a standard format Pubdate: publication date for the article that contains the time element Code <time datetime= 2018-09-04 >September 4th</time> 49
The fgure and fgcaption elements The fgure element is a regular block element that is used to specify a fgure like an image, illustration or code sample. The fgcaption element is a regular block element that give a caption to the fgure. 50
Example of fgure and fgcaption Code <fgure> <code> $date = 2018-09-04 ;<br> echo $date; </code> <fgcaption> PHP for printing a variable </fgcaption> </fgure> In Browser 51
Div and span elements Div and span elements are used for generic block and inline elements respectively. These were commonly used before HTML5 to lay out the HTML for a web page. You can still use the div element for generic block elements if there is not an applicable HTML5 semantic element. You can still use the span element for generic inline elements if there is not an applicable HTML5 semantic element. 52
Example page layout with divs <div id= header> <!-- header content --> </div> <div id= main > <!-- main content --> </div> <div id= footer > <!-- footer content --> </div> 53
The same page using semantic elements <header> <!-- header content --> </header> <main> <!-- main content --> </main> <footer> <!-- footer content --> </footer> 54