overview html, html5 and validations
Post on 12-Apr-2017
1.664 Views
Preview:
TRANSCRIPT
May 3, 2023 Web Design Technology 1
Overview of HTML, HTML5and Validations
Yaowaluck Promdee, Dr. Sumonta Kasemvilas
http://deltabrasil.com/
May 3, 2023 Web Design Technology 2
Indexwww.kindredtechnology.com
• Overview of Web design technology
• Introduction of HTML
• HTML5 • Validations• Assignment
May 3, 2023 Web Design Technology 3
Overview of Web design
What is Web design ?
www.befound.media
May 3, 2023 Web Design Technology 4
catseyemarcom.com
May 3, 2023 Web Design Technology 5
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?
May 3, 2023 Web Design Technology 6
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/
May 3, 2023 Web Design Technology 8
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
May 3, 2023 Web Design Technology 9
HTML Page StructureBelow is a visualization of an HTML page structure:
May 3, 2023 Web Design Technology 10
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>
May 3, 2023 Web Design Technology 11
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
May 3, 2023 Web Design Technology 12
TableTry it! How is HTML code above will produce the following result?
Subject Name Room
322432 Web design 6601
322793 Research Methodology 8504
May 3, 2023 Web Design Technology 13
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
May 3, 2023 Web Design Technology 14
HTML with div
May 3, 2023 Web Design Technology 15
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>
May 3, 2023 Web Design Technology 16
http://www.s3computers.com/images/html5.jpg
May 3, 2023 Web Design Technology 17
May 3, 2023 Web Design Technology 18
New Elements <header>
<sidebar> or <aside>
<footer>
<nav>
<section>
<article>
May 3, 2023 Web Design Technology 19
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/
May 3, 2023 Web Design Technology 20
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
May 3, 2023 Web Design Technology 21
Problem with IEInternet Explorer 8 and earlier, does not allow styling of unknown elements.Sjoerd Visscher created the "HTML5 Enabling JavaScript", "the shiv"
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
May 3, 2023 Web Design Technology 22
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
May 3, 2023 Web Design Technology 23
Web Validations https://validator.w3.org/nu/
May 3, 2023 Web Design Technology 24
Assignment#1
Write HTML Code following the figure in notepad or notepad++. 1. Using div 2. Using HTML5
top related