CHAPTER 1: GETTING STARTED WITH HTML CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)

Size: px

Start display at page:

Download "CHAPTER 1: GETTING STARTED WITH HTML CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)"

Charity Parsons
6 years ago
Views:

1 CHAPTER 1: GETTING STARTED WITH HTML

EXPLORING THE HISTORY OF THE WORLD WIDE WEB Network: a

linked together to share information and services.

enabled users to easily navigate from one topic to another.

2 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.

3 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.

4 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.

5 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.

6 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

7 <element> content </element> 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.

8 <element attribute1= value1, attribute2= value2.> 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.

9 HEAD ELEMENTS <title> document title </title> Displayed on the browser's title bar

10 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.

11 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>

12 LIST ELEMENTS 1. Ordered List <ol> <li> item </li> </ol> 2. Unordered List <ul> <li> item </li> </ul> 3. Nesting Lists

13 SYNTAX VS. SEMANTICS Syntax: The rules that govern how code should be entered. Semantics: the meaning.

14 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>

15 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)

Review of HTML. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar

Review of HTML. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar Review of HTML Chapter 3 Fundamentals of Web Development 2017 Pearson Fundamentals of Web Development http://www.funwebdev.com - 2 nd Ed. What Is HTML and Where Did It Come from? HTML HTML is defined as