chapter 1: Getting Started with HTML - WordPress.com · To denote the various elements in an HTML document, you use tags. The file extension .html indicates that the file is an HTML

CHAPTER 1: GETTING STARTED WITH HTML

CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)

EXPLORING THE HISTORY OF THE WORLD WIDE WEB

Network: a structure that allows devices known as nodes or hosts to be linked together to share information and services.

World Wide Web (Web): a system of hypertext documents that enabled users to easily navigate from one topic to another.

Each document on the World Wide Web is referred to as a Web page and is stored on a Web server.

When you access a Web page, a Web browser retrieves the page from its Web server and renders it on your computer or other device.


WHAT IS HTML?

HyperText Markup Language - HTML is a collection of platform-independent styles that define the various components of a World Wide Web document.

HTML was invented by Tim Berners-Lee.


HOW TO CREATE AND VIEW AN HTML DOCUMENT?

1. Use a text editor such as Editpador TextPadto to create the HTML document OR use programs that enable easy publishing.

2. Save the document file as filename.html on a PC. This is called the Document Source.

3. Open the HTML document in any web browser.


HTML BASICS

HTML documents are plain-text files that can be created using any text editor.

An element is a fundamental component of the structure of a text document. Some examples of elements are heads, tables, paragraphs, and lists.

Elements can contain plain text, other elements, or both.

To denote the various elements in an HTML document, you use tags.

The file extension .html indicates that the file is an HTML document and must be used.

To view the HTML code of a web page: right click on the web page, then select Preview Code.


HTML TAGS

HTML tags consist of a left angle bracket (<), a tag name, and a right angle bracket (>).

Tags are usually paired (e.g., <H1> and </H1>) to start and end the tag instruction.

The end tag looks just like the start tag except a slash (/) precedes the text within the brackets.

Nested tags should NOT overlap.

An empty element does not enclose content. Eg. <br/>

Comments in an html document are placed as follows 


THE STRUCTURE OF AN HTML DOCUMENT

1. HTML <html> </html>

This element tells your browser that the file contains HTML coded information.

2. HEAD <head> </head>

This element identifies the first part of your HTML-coded document that contains information about the document such as the title.

3. BODY <body> </body>

This element is the second--and largest--part of your HTML document. It contains the content of your document (displayed within the text area of your browser window).

4. All other tags come within the body tag.

<element> content </element>


SPECIFYING AN ELEMENT ATTRIBUTE

Attributes specify the use, behavior, and appearance of an element.

Attribute values do not appear in the rendered web page.

<element attribute1=“value1”, attribute2=“value2”….> content </element>


HEAD ELEMENTS

<title> document title </title>

Displayed on the browser's title bar


DEFINING THE STRUCTURE OF THE PAGE BODY

1. Draw a sketch of the web page or create a sample document (using word for example).

2. Add body elements.


BODY ELEMENTS

Structural Elements <header> </header>

<footer> </footer>

<section> </section>

<aside> </aside>

<nav> </nav>

<article> </article>

<div> </div>

Heading elements: <h1> heading </h1>………………….<h6> heading </h6>

Paragraph : <p> paragraph </p>

Address: <address> address </address>


LIST ELEMENTS

1. Ordered List

<ol>

<li> item </li>

……

</ol>

2. Unordered List

<ul>

<li> item </li>

………

</ul>

3. Nesting Lists


SYNTAX VS. SEMANTICS

Syntax: The rules that govern how code should be entered.

Semantics: the meaning.


EXAMPLE

<html>

<head>

<TITLE>A Simple HTML Example</TITLE>

</head>

<body>

<H1>HTML is Easy To Learn</H1>

<P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P>

</body>

</html>


LAB # 1

• Create a basic structure of an HTML document.

• Put “Your name’s First Web Page” as the title of your html document. Eg. “Asma’s First Web Page”.

• Add a comment with the author name and date in the head of the html document.

• Add three headings “Things I do in my free time”, “Favorite Foods”, and “Places I want to travel to” in the body of your html document.

• Add a paragraph under the first heading.

• Add an ordered list under the second heading.

• Add an un-ordered list under the third heading.

Created by L. Asma Rikli (adapted from HTML, CSS, and Dynamic HTML by Carey)

Documents

chapter 1: Getting Started with HTML - WordPress.com · To denote the various elements in an HTML document, you use tags. The file extension .html indicates that the file is an HTML