Scribd
Upload
17 views

L02 - HTML Basics Part 1

Uploaded by

sammy moe
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
17 views

L02 - HTML Basics Part 1

Uploaded by

sammy moe
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

+

Web Programming
By: Bernard Mussa
+

HTML5
+
Introduction
 HTML5 (HyperText Markup Language 5)
 Markup language that specifies the structure and content of
documents that are displayed in web browsers

 Introduce you HTML5 basics, then cover more


sophisticated HTML5 techniques such as:
 Tables, which are particularly useful for structuring
 Information from databases (i.e., software that stores
structured sets of data)
 Forms for collecting information(input data) from web-page
visitors
 Internal linking for easier page navigation
 Metadata elements for specifying information about a
document
+ Editing HTML5
 We’llcreate HTML5 documents by typing HTML5
markup text in a text editor (such as Notepad,
TextEdit, vi, emacs) and saving it with the .html
or .htm filename extension.

 Computers called web servers store HTML5


documents.

 Clients
(such as web browsers running on your local
computer or smartphone) request specific resources
such as HTML5 documents from web servers.
+ First HTML5 Example
 Create an HTML5 document named main.html,
which is stored in the examples/folder.

 This
first example displays the message “Welcome to
HTML5!” in the browser.
+ First HTML5 Example
+ Document Type Declaration

T h e document type declaration


(DOCTYPE) is required in HTML5
documents so that browsers render the
page in standards mode.
 Some browsers operate in quirks mode to
maintain backward compatibility with web
pages that are not up-to-date with the
latest standards.
 Syntax: <!DOCTYPE html>
+ Comments
I n s e r t
comments in your HTML5
markup to improve readability and
describe the content of a document.
The browser ignores comments when
your document is rendered.
Comments start with <!-- and end with
-->.
+ html, head and body Elements
 HTML5 markup contains:
 Text (and images, graphics, animations, audios and videos) that
represents the content of a document
 Elements that specify a document’s structure and meaning

 The html element encloses the head section (represented by the head
element) and the body section (represented by the body element).

 The head section contains information about the HTML5 document, such
as the character set (UTF-8, the most popular character-encoding
scheme for the web) that the page use which helps the browser determine
how to render the content and the title.

 The head section also can contain special document-formatting


instructions called CSS3 style sheets and client-side programs called
scripts for creating dynamic web pages.

 The body section contains the page’s content, which the browser displays
when the user visits the web page.
+ Start Tags and End Tags
 HTML5 documents delimit most elements with a start tag and end tag.

 A start tag consists of the element name in angle brackets


 For example, <html>

 An end tag consists of the element name preceded by a forward slash


(/) in angle brackets
 For example, </html>

 There are several so-called “void elements” that do not have end tags.

 Many start tags have attributes that provide additional information


about an element, which browsers use to determine how to process
the element.

 Each attribute has a name and a value separated by an equals sign


(=).
+ Title Element
 The title element is called a nested element, because
it’s enclosed in the head element’s start and end tags.

 The head element is also a nested element, because


it’s enclosed in the html element’s start and end tags.

 The title element describes the web page.


 Titles usually appear in the title bar at the top of the
browser window, in the browser tab on which the
page is displayed, and also as the text identifying a
pa g e w h e n u s e r s a d d t h e p a g e t o t h e i r l i st o f
Favorites or Bookmarks, enabling them to return to
their favorite sites.
 Search engines use the title for indexing purposes
and when displaying results
+ Paragraph Element (<p>...</p>)
text placed between the <p> and </p>
 All
tags forms one paragraph.
+ W3C HTML Validation Service
HTML5 documents that are syntactically
correct are guaranteed to render properly
HTML5 documents that contain syntax
errors may not display properly
Validation services (e.g.,
validator.w3.org/#validate-by-upload)
ensure that an HT ML 5 d o c u m e n t is
syntactically correct
+
Headings
HTML5 provides six heading elements
(h1 through h6) for specifying the
relative importance of information
Heading element h1 is considered the
most significant heading and is
rendered in the largest font.
Each successive heading element (i.e.,
h2, h3, etc.) is rendered in a
progressively smaller font.
+ Headings (cont.)
HTML5 provides six heading elements
(h1 through h6) for specifying the
relative importance of information
Heading element h1 is considered the
most significant heading and is
rendered in the largest font.
Each successive heading element (i.e.,
h2, h3, etc.) is rendered in a
progressively smaller font.
+ Headings (Cont.)
+ Headings (Cont.)
+ Exercise 1
 Create html file displaying 3 paragraphs with
details of the following about you:
 Your education background
 Your favorite programming language
 Your future career goals
+ Exercise 2
+

END!

You might also like