Embed Size (px)
Citation preview
Web Site Design and Development
Lecture 3
CS 0134Fall 2018
Tues and Thurs1:00 – 2:15PM
2
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.
3
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
4
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.
5
Example title elements
<title>My Web Site | Home</title>
<title>Chicken Pot Pie Recipe</title>
6
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
7
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.
8
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”>
9
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.
10
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”>
11
Questions?
12
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
13
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.
14
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>
15
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
16
Example pre element
Code In Browser
<pre>h1 { color: blue}</pre>
17
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.
19
The <p> element
● The <p> element is a regular block element that is used to specify a paragraph of text.
Code In Browser
<p>This is a very shortparagraph of text. It’sonly two sentences.</p>
20
The sup element
● The sup element is a regular inline element that is used to specify text as a superscript.
Code In Browser
September 4<sup>th</sup>,
2018.
21
The sub element
● The sub element is a regular inline element that is used to specify text as a subscript.
Code In Browser
H<sub>2</sub>O
22
The br element
● The br element is a empty inline element that is used to start a new line of text.
Code In Browser
This is a long line of<br>text that takes up<br>several lines.
23
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 In Browser<abbr title=”Captain”>Capt.</abbr> Kirk
24
The cite element
● The cite element is a regular inline element that is used to specify the title of a work.
Code In Browser
My favorite classical workis <cite>Mars, The Bringerof War</cite> by Gustav Holst.
25
The code element
● The code element is a regular inline element that is used to specify a segment of code.
Code In BrowserTo defne a name variable, enter<code>var name = "Adam"</code>.
26
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 In Browser<p><dfn>NASA</dfn> is the USA’snational space agency</p>
27
The em element
● The em element is a regular inline element that is used to specify that the text has emphasis.
Code In Browser
<em>Emphasized text</em>
28
The kbd element
● The kbd element is a regular inline element that is used to specify keyboard input.
Code In Browser
To confrm, enter <kbd>yes</kbd> in the text box.
29
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 In Browser
<q>An investment in knowledgepays the best interest</q>- Benjamin Franklin
30
The samp element
● The samp element is a regular inline element that is used to specify sample output from a computer program.
Code In Browser
When you open the terminalyou will see output like <samp>adam@adams-laptop:~$</samp>
31
The small element
● The small element is a regular inline element that is used to specify a side comment, like a disclaimer.
Code In Browser
Buy this car for $15,000 <small>tax and fees not included</small>
32
The strong element
● The small element is a regular inline element that is used to specify that the text is strongly emphasized.
Code In Browser
<strong>Strongly EmphasizedText</strong>
33
The var element
● The var element is a regular inline element that is used to specify a computer variable.
Code In Browser
In order to show the date, setthe <var>date</var> variable totrue.
34
Questions?
35
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.
36
Example character entities
● & - &● < - <● > - >● © - ©● π - π ● The complete list of character entities can be
found at https://www.w3.org/TR/html5/syntax.html#named-character-references
37
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
38
Questions?
39
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.
40
HTML5 semantic elements
● The main HTML5 semantic elements:– Header– Main– Section– Article– Nav– Aside– Footer
41
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>
42
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>
43
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>
44
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>
45
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>
46
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>
47
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>
48
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
49
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>
50
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.
51
Example of fgure and fgcaption
Code In Browser
<fgure><code> $date = “2018-09-04”;<br> echo $date;</code><fgcaption> PHP for printing a variable</fgcaption>
</fgure>
52
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.
53
Example page layout with divs
<div id=”header><!-- header content -->
</div><div id=”main”>
<!-- main content --></div><div id=”footer”>
<!-- footer content --></div>
54
The same page using semantic elements
<header><!-- header content -->
</header><main>
<!-- main content --></main><footer>
<!-- footer content --></footer>
![META [DADOS] / META [DATA]](https://img.pdfslide.us/doc/110x75/5790780b1a28ab6874c09b8f/meta-dados-meta-data.jpg)
