The site purpose : what is the point of this website? and how? it going fulfill that purpose better than any other site on the web ? The site goal can help you to make it great. Once you know the goals of the sites, you can plan around them.
code show structure html code the character encoding (charset) declaration is simple the default character encoding in HTML5 is UTF-8
The id attribute can be used to create a bookmark inside an HTML document. Tip: Bookmarks are not displayed in any special way. They are invisible to the reader. An anchor with an id inside an HTML document: Link id Attribute Create a link to the "Useful Tips Section" inside the same document: <a href="#tips">Visit the Useful Tips Section</a>
HTML Block Elements Most HTML elements are defined as block level elements or as inline elements. Block level elements normally start (and end) with a new line when displayed in a browser. Examples: <h1>, <p>, <ul>, <table> HTML Inline Elements Inline elements are normally displayed without starting a new line. Examples: <b>, <td>, <a>, <img>
The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements. The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it. When used together with CSS, the <div> element can be used to set style attributes to large blocks of content. Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using <table> elements for layout is not the correct use of <table>. The purpose of the <table> element is to display tabular data.
The HTML <span> Element The HTML <span> element is an inline element that can be used as a container for text. The <span> element has no special meaning. When used together with CSS, the <span> element can be used to set style attributes to parts of the text.
Html5 introduces a list of new elements to build a page structure. old structures will be replaced with new elements, such as headers, footers, sections, articles, etc. The idea is to get rid of unnecessary div elements.
New html5 element new semantic like a <header>, <footer> New form control attribute like a number, date, time, calendar New graphic elements: <svg> and <canvas> New multimedia element: <audio> and < video>
New Elements New Attributes Full CSS3 Support Video and Audio 2D/3D Graphics Local Storage Local SQL Database Web Applications
new tags will be a more organized and cleaner code. <body> <header>…</header> <nav>…</nav> <article> <section> …</section> </article> <aside>…</aside> <footer>…</footer> </body>
HTML5 offers new elements for better structure:
When using a validator to check HTML, XHTML or CSS documents, the validator returns a list of errors found, according to your chosen standard. Make sure you make it a habit to validate all your web pages before publishing. Why validate, what are the benefits? 1. Non uniform browser correction Non valid pages rely on the browser to auto-correct your code, and each browser does this differently. So if you forget to close a tag, Firefox might ignore this but Safari doesn't and you end up with a broken layout.
2. Rendering time If your code is valid the browser has to do less thinking as it doesn't have to correct any code, therefore the page will render faster.
3. Future proofing You never know what's around the corner in regards to technology but the chances are that if you have valid (X)HTML, you're ensuring that your website will work with future technologies.
4. Google prefers valid code Shaun Anderson conducted an interesting validation test; Does Google like valid code?.
This experiment included 4 pages with the same content but a mixture of valid and non-valid HTML and CSS. The result was that Google picked up the page that had valid HTML and valid CSS and indexed this page over the rest.
5. Accessibility A valid site is more likely to be accessible to all types of browsers, platforms and screen readers.
6. Self satisfaction If feels good when you run a validation check on your site and you see the green bar appear :)
What are the common validation errors and how to fix them? a. Ampersands This always catches me out. Ampersands must be written '&' and not just '&'. This is true for writing urls too.
b. Quotations Element property values must be put within quotes.
c. Closing tags All elements must be closed off, even image tags if you're using a XHTML DTD.
Image d. Doctypes Your page must have a valid Document Type Definition (DTD) at the top of the page, and take note that it is case sensitive.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> e. Nesting elements incorrectly Elements must be opened and closed in order.
Overview HTML, HTML5 and Validations
Overview of HTML, HTML5
Yaowaluck Promdee, Dr. Sumonta Kasemvilas
19/08/58 03:34 น. Web Design Technology 1
• Overview of Web
• Introduction of
19/08/58 03:34 น. Web Design Technology 2
Overview of Web design
19/08/58 03:34 น. Web Design Technology 3
19/08/58 03:34 น. Web Design Technology 4
• This includes both
• the design
color and direction
What is web design?
19/08/58 03:34 น. Web Design Technology 5
Steps of Web design
19/08/58 03:34 น. Web Design Technology 6
redesign-project/19/08/58 03:34 น. Web Design Technology 7
Introduction to HTML
• HTML stands for Hyper Text Markup
• HTML is a markup language that is a set of
• HTML documents are also called web
• Start and end tags are also called opening
tags and closing tags
19/08/58 03:34 น. Web Design Technology 8
HTML Page Structure
Below is a visualization of an HTML page structure:
19/08/58 03:34 น. Web Design Technology 9
A hyperlink (or link) is a word, group of words, or image that you can click
on to jump to another document.
HTML Link Syntax
<a href=“url”>Link text</a>
Example Link to Google
If new tab use Google
Link id Attribute
< a id=“link”> Test link</a>
Inside the same document:
<a href="#link">Go to link</a>
19/08/58 03:34 น. Web Design Technology 10
Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag. (tr stands for table row)
A row is divided into data cells with the <td> tag. (td stands for table
A row can also be divided into headings with the <th> tag. (th
stands for table heading)
<table style="width:400px" border="1">
19/08/58 03:34 น. Web Design Technology 11
How is HTML code above will produce the following
Subject Name Room
322432 Web design 6601
322793 Research Methodology 8504
19/08/58 03:34 น. Web Design Technology 12
HTML Block Elements
Examples: <h1>, <p>, <ul>, <table>
HTML Inline Elements
Examples: <b>, <td>, <a>, <img>
HTML Grouping Tags
<div> : block-level
<span> : inline
div: This is<div style=“color:blue”>blue</div>color
Span: This is<span style=“color:blue”>blue</span>color
This is blue color
19/08/58 03:34 น. Web Design Technology 13
HTML with div
19/08/58 03:34 น. Web Design Technology 14
19/08/58 03:34 น. Web Design Technology 18
<sidebar> or <aside>
New Semantic/Structural Elements
<article> Defines an article in the document
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content, like illustrations, diagrams,
photos, code listings, etc.
<footer> Defines a footer for the document or a section
<header> Defines a header for the document or a section
<main> Defines the main content of a document
19/08/58 03:34 น. Web Design Technology 19
Elements Removed in HTML5
19/08/58 03:34 น. Web Design Technology 20
The following HTML4 elements have been removed from HTML5:
Element Use instead
Problem with IE
19/08/58 03:34 น. Web Design Technology 21
Internet Explorer 8 and earlier, does not allow styling of
<!--[if lt IE 9]>
19/08/58 03:34 น. Web Design Technology 22
A validator is a software program that can check your
web pages against the web standards.
Why validate, what are the benefits?
1.Non uniform browser correction
2. Rendering time
3. Future proofing
4. Google prefers valid code
6. Self satisfaction
19/08/58 03:34 น. Web Design Technology 23
Write HTML Code following the figure in notepad or
notepad++. 1. Using div 2. Using HTML5
19/08/58 03:34 น. Web Design Technology 24