Download presentation
Presentation is loading. Please wait.
1
Basic of HTML Chapter 2
2
Hypertext Markup Language (HTML)
Describes the content and structure of information on a web page not the same as the presentation (appearance on screen) It surrounds text content with opening and closing tags Each tag's name is called an element syntax: <element> content </element> example: <p>This is a paragraph</p> Most whitespace is insignificant in HTML (ignored or collapsed to a single space) We will use a newer version called HTML5
3
HTML5 HTML comes in different versions. When people talk about HTML 5 they are talking about the updates to the mark up language. These updates were agreed (mostly) by a whole host of different parties, all members of an organization called W3C. W3C was founded in 1994 by Tim Berners-Lee, who also created the first version of HTML and invented the World Wide Web. They now oversee the defining of new Web technologies. Companies who make browser like Microsoft (Internet Explorer), Mozilla (Firefox), and Apple (Safari) can then decide which of the new Web technologies they wish to implement. Most of the big names in browser technology decided to implement quite a lot of the new suggested updates (specifications) put forward by the W3C. These specifications are commonly known as HTML 5. In practice, this means implementing features like HTML Video and audio directly into the browser, as opposed to needing a 3rd party plugin like Adobe's Flash. Another exciting update is something called the Canvas tag. This allows you to create quite sophisticated animations and graphics using Javascipt, again without needing a 3rd-party plugin.
4
Structure of an HTML page
<!DOCTYPE html> <html> <head> information about the page </head> <body> page contents </body> </html>
5
Structure of an HTML page
The first line on the top, <!DOCTYPE html>, is a document type declaration and it lets the browser know which flavor of HTML you’re using (HTML5, in this case). It’s very important to stick this in - If you don’t, browsers will assume you don’t really know what you’re doing and act in a very peculiar way. In version of HTML prior to HTML 5 the DOCTYPE could be very messy. In HTML 5, however, it's just this: <!DOCTYPE HTML> To get back to the point, <html> is the opening tag that kicks things off and tells the browser that everything between that and the </html> closing tag is an HTML document. The stuff between <body> and </body> is the main content of the document that will appear in the browser window
6
Head Tag Parts Page title: <title>
It describes the title of the web page <title>Chapter 2: HTML Basics</title> placed within the head of the page displayed in the web browser's title bar and when bookmarking the page.
7
Body Tags Contains a lot of tags which are placed within the body of the page. The tags could be: Without any extra information inside < > (most of the tags). It should have a closing tag that has / <p> Hello, this is only a paragraph </p> Some tags can contain additional information inside the < > called attributes. <a href="page2.html">Next page</a> Attributes are extra bits of information. Attributes appear inside the opening tag and their values sit inside quotation marks. They look something like <tag attribute="value">Margarine</tag>. We will come across tags with attributes later. Some tags don't contain content; can be opened and closed in one tag <img src="bunny.jpg" alt="pic from Easter" />
8
Body Tag Parts Paragraph: <p>
Placed within the body of the page It is used to write a paragraph of text (block) How to write it inside the HTML. <p>You're not your job. You're not how much money you have in the bank. You're not the car you drive. You're not the contents of your wallet. You're not your khakis. You're the all-singing, all-dancing crap of the world.</p> How does it look inside the browser You're not your job. You're not how much money you have in the bank. You're not the car you drive. You're not the contents of your wallet. You're not your khakis. You're the all-singing, all-dancing crap of the world.
9
Body Tag Parts Line Break: <br>
forces a line break in the middle of a block element (inline) Warning: Don't over-use br (guideline: >= 2 in a row is bad) It is used to write a paragraph of text (block) How to write it inside the HTML. <p>The woods are lovely, dark and deep, <br /> But I have promises to keep, <br /> And miles to go before I sleep, <br /> And miles to go before I sleep.</p> How does it look inside the browser The woods are lovely, dark and deep, But I have promises to keep, And miles to go before I sleep, And miles to go before I sleep.
10
Body Tag Parts Phrase elements: <em>, <strong>
em: emphasized text (usually rendered in italic) strong: strongly emphasized text (usually rendered in bold) How to write it inside the HTML. HTML is <em>really</em>, <strong>REALLY</strong> fun! How does it look inside the browser HTML is really, REALLY fun!
11
Body Tag Parts Headings: <h1>, <h2>, ..., <h6>
Headings to separate major areas of the page (block) How to write it inside the HTML. <h1>West Kentucky University</h1> <h2>Department of Computer Science</h2> <h3>CS 270 Introduction to Web Development</h3> How does it look inside the browser West Kentucky University Department of Computer Science CS 270 Introduction to Web Development
12
Body Tag Parts Headings: <h1>, <h2>, ..., <h6>
They are h1, h2, h3, h4, h5 and h6. h1 being the almighty emperor of headings and h6 being the lowest pleb. When you use these heading, they should always be used in order, as they were intended. For example, an h4 should be a sub-heading of an h3, which should be a sub-heading of an h2.
13
Body Tag Parts Headings: <h1>, <h2>, ..., <h6>
Don’t use the heading tags to magnify the text or make it looks bold. You will use other tags for that. Think about the heading tags as something that build a structure.
14
Body Tag Parts Horizontal rule: <hr>
a horizontal line to visually separate sections of a page (block) It is a one tag only, that should be immediately closed with /> How to write it inside the HTML. <p>First paragraph</p> <hr /> <p>Second paragraph</p> How does it look inside the browser First paragraph Second paragraph
15
Body Tag Parts Links: <a>
links, or "anchors", to other pages (inline) It is a one tag only, that should be immediately closed with /> How to write it inside the HTML. <p> Search <a href=" or our <a href="lectures.html">Lecture Notes</a>. </p> How does it look inside the browser Search Google or our Lecture Notes.
16
Body Tag Parts Links: <a>
uses the href attribute to specify the destination URL can be absolute (to another web site) or relative (to another page on this site) anchors are inline elements; must be placed in a block element such as p or h1
17
Body Tag Parts Links: <a>
The target attribute specifies where to open the linked document. The target attribute can have one of the following values: _blank - Opens the linked document in a new window or tab _self - Opens the linked document in the same window/tab as it was clicked (this is default) _parent - Opens the linked document in the parent frame _top - Opens the linked document in the full body of the window framename - Opens the linked document in a named frame
18
Body Tag Parts Images: <img>
inserts a graphical image into the page (inline) How to write it inside the HTML. <img src="images/gollum.jpg" alt="Gollum from LOTR" /> How does it look inside the browser the src attribute specifies the image URL HTML5 also requires an alt attribute describing the image
19
Body Tag Parts More about Images: <img>
if placed in an a anchor, the image becomes a link How to write it inside the HTML. <a href=" <img src="images/gandalf.jpg" alt="Gandalf from LOTR" title="You shall not pass!" /> </a> How does it look inside the browser title attribute is an optional tooltip (on ANY element)
20
Body Tag Parts Nested Tags
HTML is <em>really, <strong>REALLY</em> lots of</strong> fun! </p> tags must be correctly nested. (a closing tag must match the most recently opened tag) the browser may render it correctly anyway, but it is invalid HTML
21
Comments comments to document your HTML file or "comment out" text
How to write it inside the HTML: <!-- My web page, by Ismail Abumuhfouz CS 270, Spring > <p>CS courses are <!-- NOT --> a lot of fun!</p> How does it look inside the browser: CS courses are a lot of fun! many web pages are not thoroughly commented (or at all) still useful at top of page and for disabling code comments cannot be nested and cannot contain a --
22
Lists There are 3 different kinds of lists: Unordered List Order List
Definition List
23
Unordered list: <ul>, <li>
ul represents a bulleted list of items (block) li represents a single item within the list (block) How to write it inside the HTML: <ul> <li>No shoes</li> <li>No shirt</li> <li>No problem!</li> </ul> How does it look inside the browser: No shoes No shirt No problem!
24
More About Unordered list:
a list can contain other lists: How to write it inside the HTML: How does it look inside the browser: <ul> <li>Simpsons: <li>Homer</li> <li>Marge</li> </ul> </li> <li>Family Guy: <li>Peter</li> <li>Lois</li> Simpsons: Homer Marge Family Guy: Peter Lois
25
Ordered list: <ol>, <li>
ol represents a numbered list of items (block) li represents a single item within the list (block) How to write it inside the HTML: How does it look inside the browser: <p>RIAA business model:</p> <ol> <li>Sue customers</li> <li>???</li> <li>Profit!</li> </ol> RIAA business model: Sue customers ??? Profit!
26
Definition list: <dl>, <dt>, <dd>
dl represents a list of definitions of terms (block) dt represents each term, and dd its definition How to write it inside the HTML: How does it look inside the browser: <dl> <dt>newbie</dt> <dd>one who does not have mad skills</dd> <dt>own</dt> <dd>to soundly defeat (e.g. I owned that newbie!)</dd> <dt>frag</dt> <dd>a kill in a shooting game</dd> </dl> newbie one who does not have mad skills own to soundly defeat (e.g. I owned that newbie!) frag a kill in a shooting game
27
Quotations: <blockquote>
a lengthy quotation (block) How to write it inside the HTM <p>As Lincoln said in his famous Gettysburg Address:</p> <blockquote> <p>Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.</p> </blockquote> How does it look inside the browser: As Lincoln said in his famous Gettysburg Address: Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.
28
Inline quotations: <q>
a short quotation (inline) How to write it inside the HTM <p>Quoth the Raven, <q>Nevermore.</q></p> How does it look inside the browser: Quoth the Raven, "Nevermore".
29
HTML Character Entities
a way of representing any Unicode character within a web page Complete list of HTML entities How would you display the text & on a web page? character(s) entity < > é è ñ é è ñ ™ © ™ © π δ Δ π δ Δ И И " & " &
30
Block and Inline Elements
31
Block and Inline Elements
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. block elements contain an entire large region of content examples: paragraphs, lists, table cells the browser places a margin of whitespace between block elements for separation inline elements affect a small amount of content examples: bold text, code fragments, images the browser allows many inline elements to appear on the same line must be nested inside a block element
32
Block Elements Block-level Elements
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). The <div> element is a block-level element. Example <div>Hello</div> <div>World</div> Block level elements in HTML: <address><article><aside><blockquote><canvas><dd><div><dl><dt><fieldset>< figcaption><figure><footer><form><h1>- <h6><header><hr><li><main><nav><noscript><ol><output><p><pre><section> <table><tfoot><ul><video>
33
Inline elements Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary. This is an inline <span> element inside a paragraph. Example <span>Hello</span> <span>World</span> Inline elements in HTML: <a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><label><map><object><q><samp><script><select><small><span><strong><sub><sup><textarea><time><tt><var>
34
HTML Grouping Tags Tag Description <div>
Defines a section in a document (block-level) <span> Defines a section in a document (inline)
35
The <div> Element
The <div> element is often used as a container for other HTML elements. <div> is a block level tag which plays a big role in grouping various other HTML tags and applying CSS on group of elements. The <div> element has no required attributes, but style, class and id are common (see that later). When used together with CSS, the <div> element can be used to style blocks of content: Example <div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div>
36
The <span> Element
The <span> element is often used as a container for some text. <span> is an inline element and it can be used to group inline-elements in an HTML document. This tag also does not provide any visual change on the block but has meaning when it is used with CSS. The <span> element has no required attributes, but style, class and id are common. When used together with CSS, the <span> element can be used to style parts of the text: Example <h1>My <span style="color:red">Important</span> Heading</h1>
37
HTML History
38
HTML 1-5.1 Year Version 1989 Tim Berners-Lee invented www 1991
Tim Berners-Lee invented HTML 1993 Dave Raggett drafted HTML+ 1995 HTML Working Group defined HTML 2.0 1997 W3C Recommendation: HTML 3.2 1999 W3C Recommendation: HTML 4.01 2000 W3C Recommendation: XHTML 1.0 2008 WHATWG HTML5 First Public Draft 2012 WHATWG HTML5 Living Standard 2014 W3C Recommendation: HTML5 2016 W3C Candidate Recommendation: HTML 5.1
39
HTML History . Since the early days of the World Wide Web, there have been many versions of HTML: From 1991 to 1999, HTML developed from version 1 to version 4. In year 2000, the World Wide Web Consortium (W3C) recommended XHTML 1.0. The XHTML syntax was strict, and the developers were forced to write valid and "well-formed" code. In 2004, W3C's decided to close down the development of HTML, in favor of XHTML. In 2004, WHATWG (Web Hypertext Application Technology Working Group) was formed. The WHATWG wanted to develop HTML, consistent with how the web was used, while being backward compatible with older versions of HTML. In , the WHATWG gained support by the major browser vendors. In 2006, W3C announced that they would support WHATWG. In 2008, the first HTML5 public draft was released.
40
HTML 5 In 2012, WHATWG and W3C decided on a separation:
. HTML 5 In 2012, WHATWG and W3C decided on a separation: WHATWG wanted to develop HTML as a "Living Standard". A living standard is always updated and improved. New features can be added, but old functionality cannot be removed. The WHATWG HTML5 Living Standard was published in 2012, and is continuously updated. W3C wanted to develop a definitive HTML5 and XHTML standard. The W3C HTML5 recommendation was released 28 October 2014. W3C also published an HTML 5.1 Candidate Recommendation on 21 June 2016
41
Web Standards
42
Web Standards It is important to write proper HTML code and follow proper syntax. Why use valid HTML and web standards? more rigid and structured language more interoperable across different web browsers more likely that our pages will display correctly in the future can be interchanged with other XML data: SVG (graphics), MathML, MusicML, etc.
43
W3C HTML Validator (Debugger)
validator.w3.org checks your HTML code to make sure it follows the official HTML syntax more picky than the browser, which may render bad HTML correctly Example: <p> <a href=" Lets check this simple html. </a> </p>
Similar presentations
