Please enable JavaScript.
Coggle requires JavaScript to display documents.
HTML5 HyperText Markup Language (code (special entities (< (< ;),…
HTML5 HyperText Markup Language
progress
week 1
basic operation of website
Q&A
tools to code
HTML5 ?
no coding
week 2
lots of code
Document Object Model
contextual tag and heading
link images list table multimedia
week 3
validating code
syntax
accessible
domain name registation and hosting
final project
overview
basic
Syntax and Simantic
Accessiblility
Getting stared
sugested
books
The Missing Link
section 1 web development
chap4
#
chap1
#
section 2 Document markup
chap8
#
chap9
#
chap10
#
chap11
#
chap13
#
chap16
#
chap18
#
chap7
#
#
courses
https://learn.shayhowe.com/html-css/building-your-first-web-page/
http://www.w3schools.com/html/default.asp
https://www.codecademy.com/
videos
https://www.youtube.com/watch?v=-c8iWUh3Sv4&app=desktop
https://www.youtube.com/watch?v=VANORrzKX50
not a programing language
only mark document with tags
open by browser
code
DOM Doccument Object Model
devide into certain part
tag
tags
<a>
anchor
don't show, just link to it
<p>
paragragh
are block tag
<h1-h6>
heading
are block tags
big and bold
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>
<head>
start head section
<body>
start body sections
<img>
also with source attribute
<div>
larger than paragraph tag
classify
by class attribute
as "section"
as "footer"
....
as "header"
by id attribute
list tag
order list
<ol>
unorder list
<ul>
#
item in side
<li>
2 more items...
change number to Roman numeric or alphabet by attribute
<br>
line break, like enter
<header>
to group introduction and navigation bar
a block tag
<nav>
contain link to other page or link to other part of page
<footer>
contain info, copyright, related documents, link to social media
<figure>
include caption and multimedia resources
<figcaption>
to take caption for media resource
always show unlike alt attribute
<hr>
horizontal ruler
<address>
just for easy to search in code view :)))
make text italicized
<blockquote>
tab whole block in and seperate from above and below
<detail> and <summary>
create a drop down summary box
<sub> and <sup>
power and index
<button>
create a button
<meter min="xxx" max="xxx" value="xxx">percent</meter>
to show meter bar
<progress>
same as meter
<iframe>
set with width and height
show the src link inside the box
webpage inside a webpage
remember to end tag!!!!!
don't have to learn all the tags
structure
begin tag
end tag
start with slash
same as begin tag
self closing tag
block tag
can contain inline tags
inline tag
attribute
src="path"
directory to the item
width="xxx"
set width
xxx may be in percent ~ "50%"
mean that 50% of window size
height="xxx"
#
set height
href="link"
page want to go
hyper reference
alt="text"
show text if the picture was broken
class="classname"
to have the same format with other item in class
id="idnumber"
to use this element later by id
style="auhahadh"
set style
accesskey
assign shortcut to initiate an element
tabindex
to make order of some important element can move to by pressing tab button
from small to big munber
head
#
metadata
#
language
#
title
#
on the tab
supported files, styling, add-ons
body
#
display contents
tree-like code
doctype
HTML5
#
key feature built in HTML5
provide tree-like structure all page should follow
easy to test
a top down design
new feature should be based on HTML CSS DOM and JS
quote " " => retype it
make browser recognize html file as text file
save as UTF-8
validate code
at validator.w3.org
paste url and check
upload file
type code into it
special entities
<
< ;
>
> ;
©
© ;
blank space
  ;
¢
¢ ;
&
& ;
elements
multimedia
images
image on tab title
<link rel="icon" type="image/png" href="path to image">
can't use jpeg jpg
put in <head> tag
by default it will show fullsize images
notice about size on other devices
videos/audio
<video>
attribute
height,width
loop
loop after play
controls
add control bar to play, pause, fullscreen,...
autoplay
play right after load/reload the page
add to src quote
#t=timestart,timeend
<audio>
hyperlinks
hyper reference ~ href
absolute link
is a fully URL
relative
dir from current page to item
or use the ID
to jump to other positions inside this page
clickable content
image
<a href...> <img> </a>
under line text
target attribute
self
bydefault
open in this window
blank
open in new window
top
parent
table
<table>
contain all cells
<tr>
to hold the row
<td>
cell collum
attribute rowspan="xxx"
merge cells
<th>
table heading
better than use <td> and bold
history
HTML1
1990
invent HTML
connect documents by hyper link
to jump immidiately to marked positions in document
workable in many platforms
1993
emerged Mosaic-first GUI browser
want to develop web
focus contents
focus on persionalize
IE, Netscape emerged
customize tags depends on browsers
=> standardize the web
IETF internet enginnering task force
define how network collabotarate and work
W3C world wide web consortium
define HTML and its developments
WAI the web accessibility initiative
define the way people can access into all contents from any platform
HTML5
is a cooperation between W3C and WHATWG web hypertext application techonology wrking group
HTML2-4 are versions which added new standards
before HTML5, there is no standard so plugin is required
how it works
computers connect to create LAN
LANs connect to create WAN
=>relationship to manage
client
persional use
request
by URL uniform resource Locator
protocol
http
https
ftp
some default protocol http for normal and https for bank services
domain
where we want to connect to
top-level domain
5 more items...
has an ip address
1 more item...
document
default will show index.html
generate URL into request
many kind of request else not only HTTP request
cookies
receive
work with files received
nothing/fault
404 misspelled the document
500 server down
server
always on
share resource
respond
return with file
step
type URL
DNS return real IP
send request to that IP
respond file
browser show use files to render website
browser
have to test code on many browser
IE
MS
not on MAC
Safary
Apple enviroment
not on Win
GGchrome
very fast
great security
firefox
on both win and mac
security
fast
many tools built in
really heavy
adhere to HTML5 standard
ex: detail tag not working on Firefox
have to test on many browser
no perfect browser
accessibility
visual
font size
color contrast
font style
hearing
captions for videos
ability to control multimedia
control
mouse and keyboard if those are disable
old people cant click double click fast
ad function for tab button
make button larger
cognitive
not too much information in one page
kind of web need to be optimize
education
news
commerce
social
hosting site
domain name
hosting server
regist IP address to connect to domain
file control interface cPanel
add /cpanel at url