Overview HTML, HTML5 and Validations

May 3, 2023 Web Design Technology 1

Overview of HTML, HTML5and Validations

Yaowaluck Promdee, Dr. Sumonta Kasemvilas

http://deltabrasil.com/


Indexwww.kindredtechnology.com

• Overview of Web design technology

• Introduction of HTML

• HTML5 • Validations• Assignment


Overview of Web design

What is Web design ?

www.befound.media


catseyemarcom.com


http://static.wixstatic.com/

• This includes both the design principles: balance, contrast, emphasis and unity

• the design element: lines, shapes, texture, color and direction

What is web design?


Steps of Web design

Plan

Design

Develop Deploy

Research Observe

Understand Analyze

Use Cases Wireframes

Design Concepts

CommunicateVisual design

Coding

Usability testingVerification

May 3, 2023 Web Design Technology 7http://strongdesign.co/what-can-i-expect-from-my-website-redesign-project/


Introduction to HTML

• HTML stands for Hyper Text Markup Language

• HTML is a markup language that is a set of markup tags

• HTML documents are also called web pages.

• Start and end tags are also called opening tags and closing tags


HTML Page StructureBelow is a visualization of an HTML page structure:


HTML LinksA 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 <a href=“http://www.google.com/”>Google</a>

If new tab use Google <a href=http://www.google.com/ target=“_blank”>Google</a>

Link id Attribute < a id=“link”> Test link</a>

Inside the same document:<a href="#link">Go to link</a>

http://www.google.com/





TableHTML table: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 data)A row can also be divided into headings with the <th> tag. (th stands for table heading)Example:<table style="width:400px" border="1"><tr> <td>1</td> <td>2</td></tr><tr> <td>3</td> <td>4</td></tr></table>

1 2

3 4


TableTry it! How is HTML code above will produce the following result?

Subject Name Room

322432 Web design 6601

322793 Research Methodology 8504


HTML BlocksHTML Block Elements

Examples: <h1>, <p>, <ul>, <table>

HTML Inline ElementsExamples: <b>, <td>, <a>, <img>

HTML Grouping Tags<div> : block-level<span> : inline Examplediv: This is<div style=“color:blue”>blue</div>colorSpan: This is<span style=“color:blue”>blue</span>color

This isBlueColor

This is blue color


HTML with div


Example HTML Layout• <!DOCTYPE html>

<html><body><div id="container" style="width:500px"><div id="header" style="background-color:#FFA500;"><h1 style="margin-bottom:0;">Main Title of Web Page</h1></div><div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>Menu</b><br>HTML<br>CSS<br>JavaScript</div><div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">Content goes here</div><div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">Copyright © W3Schools.com</div></div></body></html>


http://www.s3computers.com/images/html5.jpg



New Elements <header>

<sidebar> or <aside>

<footer>

<nav>

<section>

<article>


New Semantic/Structural Elements

Tag Description<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

http://www.w3schools.com/


Elements Removed in HTML5

The following HTML4 elements have been removed from HTML5:

Element Use instead

<acronym><applet><basefont><big><center><dir> <font><frame> <frameset>

<abbr><object>CSSCSSCSS<ul>CSS


Problem with IEInternet Explorer 8 and earlier, does not allow styling of unknown elements.Sjoerd Visscher created the "HTML5 Enabling JavaScript", "the shiv"




Validation HTMLA 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 correction2. Rendering time3. Future proofing4. Google prefers valid code5. Accessibility6. Self satisfaction


Web Validations https://validator.w3.org/nu/


Assignment#1

Write HTML Code following the figure in notepad or notepad++. 1. Using div 2. Using HTML5