Lesson2

Hamburger Markup Text Language

LECTURE 2

<div>

</div>

<body>

</body>

<li>

</li>

<html>

</html>

<script>

</script>

<head>

</head>

Open Tag

Close Tag

Content

Hamburger Text Markup Language - http://www.dontfeartheinternet.com/html/html

Start tags consist of the following parts, in exactly the following order:1. A "<" character.2. The element’s tag name.3. Optionally, one or more attributes, each of which must be preceded by one or more space characters.4. Optionally, one or more space characters.5. Optionally, a "/" character, which may be present only if the element is a void element.6. A ">" character.

<p><p class=“BoringTxt”>

Info via:http://www.w3.org/TR/html-markup/syntax.html#syntax-elements

End tags consist of the following parts, in exactly the following order:1. A "<" character.2. A "/" character3. The element’s tag name.4. Optionally, one or more space characters.5. A ">" character.

</p>

Attributesclass Specifies one or more classnames for an element (refers to a class in a style sheet)

id Specifies a unique id for an element

style Specifies an inline CSS style for an element

title Specifies extra information about an element (displayed as a tool tip)

Example:<p class=“classname”>

<p id=“idname”><p style=“font-size:20px;”>

<area ><base><br><col><command><embed><hr><img><input><link><meta><param><source>

Exception to the rule: VOID ELEMENTSVoid Elements are tags that don't require a closing tag to be valid. These elements are usually elements that either stand alone on the page, or where the end of their contents is obvious from the context of the page itself.

<div>Lorem ipsum dolor sit amet.<br/><img src=“example.jpg”/></div>

Void Elements

<head> Before the <body> element you will often see a <head> element. This

contains information about the page such as its title, keywords that may be useful to search engines, and other data that is not considered document content.

<title> Every HTML document must have a <title> element in the HEAD

section. You should use the <title> element to identify the contents of a document. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as "Introduction", which doesn't provide much contextual background, authors should supply a title such as "Introduction to Medieval Bee-Keeping" instead.

<body> The body of a document contains the document's content. The content

may be presented by a user agent in a variety of ways. For example, for visual browsers, you can think of the body as a canvas where the content appears: text, images, colors, graphics, etc. Everything inside this element is shown inside the main browser window.

a - “anchor” used for hyperlinksblockquote - for large quotesbody - visible part of your sitebr - line breakcite - a citationdiv - content dividerDOCTYPE - document typeem - text w/ emphasish1 - most important headerh2 - 2nd most importanth3-h6 - 3-6th most important

head - invisible part of your sitehtml - “what follows is HTML”img - imageli - list itemlink - to attach CSS stylesheetsol - ordered listp - paragraphspan - inline content dividerstrong - strong text emphasisstyle - for inline CSS stylingtitle - title of the pageul - unordered list

Common HTML Tags

List & Definitions via:http://www.dontfeartheinternet.com/html/html

Required Attributessrc is used to specify the location of the image file.alt is used to specify the alternative text of the image, which should be a short description.

Optional Attributesheight can be used to define the height of the image (in pixels). width can be used to define the width of the image (in pixels). (Height & width can also be defined using CSS.

Example

IMG Tag

Info via:http://www.htmldog.com/reference/htmltags/img/

<img src="http://www.website.com/images/logo.gif"

alt=“Logo” height=“50px” width=“50px” />

Result:

Tutorial: Your first web page!

Lesson2

Technology

Transcript of Lesson2