HTML Presentation

Introduction

Ciprian Chichirita

ciprian.chichirita@tellence.net

Contents

WWW - history
How it works
HTTP/S - protocol
HTML - prerequisites
HTML - page
HTML - details
To be continued...

WWW, the history

Uniform Resource Locators (URLs)

Browser, wget, cURL, cypress (headless browser), postman

World Wide Web

hypertext links

Internet

Tim Berners-Lee, CERN near Geneva, Switzerland

The World Wide Web, commonly known as the WWW and the Web, is an information space where documents and other web resources are identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and accessible via the Internet.[1] English scientist Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser in 1990 while employed at CERN near Geneva, Switzerland.

Headless browsers provide automated control of a web page in an environment similar to popular web browsers, but are executed via a command-line interface or using network communication. They are particularly useful for testing web pages as they are able to render and understand HTML the same way a browser would, including styling elements such as page layout, colour, font selection and execution of JavaScript and AJAX which are usually not available when using other testing methods.

how it works

CLient --URL--> DNS

CLient <--SERVER ADDR-- DNS

CLient --REQUEST--> SERVER ADDR

CLient <--RESPONSE-- SERVER ADDR

localhost, 127.0.0.1, IPv4(192.168.0.1), IPv6(::1)

how it works: URL

URI (Uniform Resource Identifier)
scheme:[//authority]path[?query][#fragment]
http[s]://www.example.com:80[443]/main/index.html?first=true#top
http: OR https:
//www. or //subdomain.
domain example.com
port 80 or 443 (ICANN has IANA)
path "/main/index.html"
query "?first=true"
fragment "#top"
(hostname == domain name == canonical[according to the rules] name == origin)

IPv4 uses 32-bit addresses which limits the address space to 4 294 967 296 (232) addresses. IPv4 reserves special address blocks for private networks (~18 million addresses) and multicast addresses (~270 million addresses).

Internet Protocol version 6 (IPv6) is the most recent version of the Internet Protocol (IP), the communications protocol that provides an identification and location system for computers on networks and routes traffic across the Internet. IPv6 was developed by the Internet Engineering Task Force (IETF) to deal with the long-anticipated problem of IPv4 address exhaustion. IPv6 is intended to replace IPv4.[1] In December 1998, IPv6 became a Draft Standard for the IETF, who subsequently ratified it as an Internet Standard on 14 July 2017.[2]

The Domain Name System (DNS) is a hierarchical and decentralized naming system for computers,services, or other resources connected to the Internet or a private network.

An Internet Protocol address (IP address) is a numerical label assigned to each device connected to a computer network that uses the Internet Protocol for communication

HTTP/S, the protocol

http and https, application layer (Open Systems Interconnection - OSI LEVEL)

SSL, TLS, HTTP /2 - stateless protocol

TLS handshake

client -- TLS version, cryptographic alg, data compression methods --> server

client <-- cryptographic alg, session ID, server digital certificate, public key -- server

client -- verify server digital certificate --> Certificate Authorithy (CA)

client -- shared secret key encrypted with server public key --> server

client -- finished msg encrypted with shared secret key --> server

client <-- finished msg encrypted with shared secret key -- server

HTTP /x status codes

1xx (Informational): The request was received, continuing process

2xx (Successful): The request was successfully received, understood, and accepted

3xx (Redirection): Further action needs to be taken in order to complete the request

4xx (Client Error): The request contains bad syntax or cannot be fulfilled

5xx (Server Error): The server failed to fulfill an apparently valid request

HTTP METHODS

POST (C)

GET (R)

PUT (U)

DELETE (D)

html-prerequisites

simple web server: python -m SimpleHTTPServer 1337

python3 -m http.server 1337

Validate HTML: https://validator.w3.org/

Check if HTML feature can be used: https://caniuse.com/

HTML - page


																	<!DOCTYPE html>
									<html>
									<head>
										<meta charset="utf-8">
										<meta http-equiv="X-UA-Compatible" content="IE=edge">
										<title>example</title>
										<meta name="viewport" content="width=device-width, initial-scale=1">
										<link rel="stylesheet" type="text/css" media="screen" href="main.css">
										<script src="main.js"></script>
									</head>
									
									<body>
										<h1> My first HTML page </h1>
									</body>
									
									</html>

HTML - details


																			<!-- this is a comment -->
										<!DOCTYPE>

https://www.w3schools.com/tags/tag_doctype.asp

HTML must-have tags (elements): html, head, body

attributes: src, href, lang, async, rel, target, custom-attr

src, href, lang, async, rel, target, custom attr

_blank, _self (default), href target

src path

"//" ("//cdn.example.com/") and "/" ("/html/index.html")

HTML - details


																			<meta charset="UTF-8">
										<meta name="description" content="Free Web tutorials">
										<meta name="keywords" content="HTML,CSS,XML,JavaScript">
										<meta name="author" content="John Doe">
										<meta name="viewport" content="width=device-width, initial-scale=1.0">

Meta tags

IE conditionals


																			<!--[if lt IE 9]>
										  <script src="/js/html5shiv.js"></script>
										<![endif]-->

HTML - character reference


																			&shy; - soft hyphen
										&nbsp; - non-breaking space
										&lt; - less then
										&gt; - greater then
										&amp; - ampersand

HTML5 - new tags (some)


																			<a>, <img>,
										<header>, <footer>,
										<article>, <section>,
										<fieldset>, <legend>

To be continued...

Forms
Table
Iframe
SVG & canvas
HTML5 custom elements
Homework

Homework

☐ If windows 10, install WSL so you can have python installed:
☐ Homework:
	☐ make a personal page that has:
	☐ a header with a image and text
	☐ a navigation bar that has 3 links:
		☐ home page
		☐ multimedia
		☐ contact
	☐ footer - where we will have contact info
	☐ pages:
		☐ home page: will have a table with your resume
		☐ multimedia: will have an embed youtube video, vimeo video, imgur image and a codepen
		☐ contact: will have a form with this fields:
			☐ name, email, subject, message, send button