What's HTML
Hyper Text Markup Language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the page |
Html Version:HTML 1991,HTML 2.0(1995), HTML 3.2(1997),HTML 4.01(1999), XHTML(2000),HTML5 (2014)
HTML structure
1. element, nested, <start tag> content </closing tag>
[h1,p, hr, a, ul,ol,li, br, form, input,select, option, img]
1) section: html, body,address,article,aside,footer,header,h1-6,hgroup,main,nav,section
2)meta: base, head,link,meta,style,title
3) text content: blockquote, dd, dir,div, dl,dt,figcaption,figure,hr,li,main,ol,p,pre,ul
4) Inline text semantics: a,abbr,b,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rb, p,rt,ruby,s,samp,small,span, strong,subsup,time,tt,u,var,wbr
5) img/multimedia:area,audio,img,map,track,video
6) embeded content: applet,embed,iframe,noembed,object,param,picture,source
7) scripting:canvas,noscript,script,
8) demarcating edits:del,ins
9) table content: table,th, tr, td, tbody, tfoot, thead,caption, col,colgroup
10) forms: form,input,select,option,textarea, button,datalist,fieldset,label,caption,meter,optgroup,output,progress
11) interactive: details, dialog,menu, menuitem,summary
12) webcomponent: slot,template
13) obsolete: acronym>abbr,applet>object,basefront,bgsound>audio, big,blink,center,command,conent,dir,element,frame,frameset, font,image>img,isindex,keygen,listing,marquee,menuitem,miticol,nextid,nobr, noembed,noframes,plaintext,shadow,spacer,strike,tt,xmp
2. attribute of elements: always inside start tag, name=value, recommend quoted value, double quotation pref, single quotation needed sometimes
id(for js,link etc),class(css),style(css),data-x attr (), href(a), src/alt/width/height (img), lang(html), title( p), disabled,required,checked
3. <head> is container of html meta data, nothing to do with heading
4. view source right click
5 style: stype="property:value;"
style="background-color:powderblue;"
style="color:blue;"
style="font-family:courier;"
style="font-size:300%;"
style="text-align:center;"
6 formating : b, string,i,em,mark,small,del,ins,sub,sup
7.quotation:
q,
blockquote cite="https://.....",
abbr title="...."
address, cite(italic), bdo dir="rtl",bdo dir="ltr"
8 comments <!-- --> |
color
Color values:
1. predefined: red,green, blue,black,white etc
2. rgb(r,g,b):rgb(255,0,0),(0,255,0),(0,0,255),(0, 0, 0),(255, 255, 255)
3. hex:#ff0000, #00ff00,#0000ff, #000000,#ffffff
4. hsl: hsl(0,100%,50%),(120,100%,50%),hsl(0,100%,50%), l=0 black, 100% white
5. rgba(r,g,b,alpha),
6. hsla(h,s,l,alpha)
HSL:
hsl(0,100%,50%),hsl(120,100%,50%),hsl(0,100%,50%),
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades:
alpha 0(transparent)-1( no transparent)
element attribute:
document.getElementByID("").style.background-color="yellow";
background: linear-gradient(direction/angle, color1, color2, color3, etc.);
body {
background: -webkit-linear-gradient(#93B874, #C9DCB9);
background: -o-linear-gradient(#93B874, #C9DCB9);
background: -moz-linear-gradient(#93B874, #C9DCB9);
background: linear-gradient(#93B874, #C9DCB9);
background-color: #93B874;
}
-webkit-animation: colorchange 60s infinite;
animation: colorchange 60s infinite; |
Cascading Style Sheets (CSS)
CSS can be added to HTML elements in 3 ways:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file (recommended, the most common)
<h1 style="color:blue;">This is a Blue Heading</h1>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
<head>
<link rel="stylesheet" href="styles.css">
</head>
style.css file:
body { background-color: powderblue;}
h1 { color: blue;font-family: verdana;font-size: 300%;}
p { color: red;border: 1px solid powderblue;padding: 30px;margin: 50px;}
<p id="p01">I am different</p>
#p01 { color: blue;}
<p class="error">I am different</p>
p.error { color: red;}
rel link
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
<link rel="stylesheet" href="/html/styles.css">
<link rel="stylesheet" href="styles.css">
|
style attribute- inline
style element <style> -- internal css
<link> element for external css file
<head> element is container of <link> and <style> elements
css related attribute: color, font-family,font-size, border, padding, margin
first scope
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<a href="https://www.w3schools.com">This is a link</a>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
<button>Click me</button>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
</ol>
<br />
</body>
</html>
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
|
Notes
1 case insensitive,but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.
2 closing tag optional, but never forget it in practice, such as <br/> instead of <br>
3) attributes quoted with "", use sigle quote when needed. |
Html links
<a href="url">link text</a>
url with or without /
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
<a href="html_images.asp">HTML Images</a>
link color:
<style>
a:link { color: green; background-color: transparent; text-decoration: none;}
a:visited { color: pink; background-color: transparent; text-decoration: none;}
a:hover,a.active {color: red; background-color: transparent; text-decoration: underline;}
</style>
target attribute:
_blank
_self (default)
_parent
_top: to break off from locking in a frame
framename
use img as a link
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
title attribute: used for tooltip text when mouse move over the link
page bookmark
<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>
<a href="html_demo.html#C4">Jump to Chapter 4</a>
|
link tag <a>
attributes: href (full url, rel path, current dir,"#ID"), target <img>,id
html img
<img src="url">
<img src="img_girl.jpg" alt="Girl in a jacket" style="float:right;width:42px;height:42px;border:0;">
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
URL: same folder, another folder, another server
alt:required
width/height recommend, using style sheet is better than attributes
float
border
usemap attribute
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
<body style="background-image:url('clouds.jpg');">
html5: flexible media devices
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
screen reader: listen to the screen
|
<img>
src,alt,with,height,float,
usermap, <map> <area>
<picture> <source>media,srcset,<img>
|
|
Table
<table>
<caption>Monthly savings</caption>
<tr>
<th>
<td>
attribute:
style="width:100%"
colspan="2"
rowspan="2"
caption: immediate followed <table>
CSS: table, th, td {
width:100%;
border: 1px solid black;
border-collapse: collapse;
border-spacing: 5px;
padding: 15px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
|
<table><caption><tr><th><td>
formating: <colgroup><col><thead><tbody><tfoot>
attributes: border, border-collapse,border-spacing,padding,text-align,colspan,rowspan,id
List
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol type="1" >
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
type: "1","A"."a"."I","i"
HTML Description Lists
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Nested HTML Lists
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
exmple style a list horizontally, to create a navigation menu using css
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
|
|
|
|
