Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
17 views

L02 - HTML Basics Part 1

Uploaded by

sammy moe
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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
We take content rights seriously. If you suspect this is your content, claim it here.
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