HTML5-Session1

WEB Intoduction

What happens when you use a web browser to navigate to a web page ?

Computers connected to the internet are called clients and servers. A simplified diagram of how they interact might look like this:

Clients: are the typical web user's internet-connected devices like (your PC , phone)
Servers: are computers that store webpages, sites, or apps.
Browser: another name "User-Agent" it's app for browes websites on internet
internet: is a global network of interconnected computers and devices.
internet connection: Allows you to send and receive data on the internet
Web (World Wide Web) WWW. : is a service that runs on the Internet .
URL: Uniform Resource Locator. ( https://www.google.com/ ) [ Protocol + Domain name ]
Domain name: is the human-readable address used to access websites like ( www.google.com/) .
HTTPS: Hypertext Transfer Protocol Secure (HTTPS) is a protocol that defines a language for clients and servers to speak to each other.
IP: (Internet Protocol) address is a unique string of numbers

You must know that

Domain name = IP

every device on the internet is identified by an IP address, and you can use IP instead of a domain name

https://www.google.com= https://142.250.187.196

Doamin name	IP Address
www.google.com	142.250.187.196
www.youtube.com	142.250.151.91
www.facebook.com	163.70.147.35

ICANN & IANA & Hosting

ICANN : Internet Corporation for Assigned Names and Numbers responsible for coordinating and managing key elements of the Internet’s global infrastructure.

IANA : Internet Assigned Numbers Authority is a department within ICANN. - Doamin name => www.Google.com - IP Address => 142.250.200.196

Hosting : Service that allows you to store your website's files (HTML, CSS, images, databases, etc.) on a web server, so people can access your website through the Internet.

What is a web development ?

Web development is the work involved in developing a website for the Internet. Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services.

For creating website

Design (UI/UX)
Frontend: HTML, CSS, JavaScript (for UI)
Backend: PHP, Node.js, MySQL

HTML5 Intoduction

HTML5 (HyperText Markup Language)

History of HTML

Version	Year	Key Features
HTML 1.0	1991	Basic structure, 18 tags
HTML 2.0	1995	Standardization of early HTML
HTML 3.2	1997	Tables, scripting, font styling
HTML 4.01	1999	Forms, CSS support, document structure
XHTML	2000	HTML + XML rules
HTML5	2014	Multimedia, semantic tags, canvas, forms

Waht we need ?

HTML Prerequisites : Basic Computer & Internet Familiarity
Download Editor Vs code
Download Google chrome Google chrome

Note : you can use VS Code online VS Code

Creating first Page

To create first page in HTML create new text file with extension .html or .htm.
The first page of a website is typically named: index.html [ index.html - home.html - default.html - main.html ... ] index.html is mostly used
becouse it is the default file that web servers look for when opening a folder or domain.
Opent file with extention .html by VS code and build structure HTML page.
Shortcut feature in VS Code using the Emmet abbreviation system.
Click on : shift + 1 -> ! and click Enter or tab in VS code to build structure html page or doc + tab or html:5 + tab .

HTML DOM Tree & Page structure

DOM stands for Document Object Model, It is a tree-like structure that represents all elements of an HTML document in a hierarchical way.

Every tag (element) in your HTML becomes a node in the DOM tree.

<!DOCTYPE html> : tells the browser
<html lang="en"> </html> : is the root of the HTML document and tells the browser the content is in English.
<head> </head> : for metadata (data about the HTML document). It is placed between the html and body tags.
<body> </body> :It contains all the content that is visible to users in the browser.
<meta charset="UTF-8" /> : tells the browser which character encoding to use when displaying the web page.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> :This tag is essential for responsive web design
<title>Document</title> :defines the title of the web page

HTML (HyperText Markup Language) depends primarily on tags to structure content on the web.
Indentation in HTML means adding spaces (usually 2 or 4) at the beginning of lines to show the nested structure of elements. This doesn’t affect how the page looks but makes the code easier to read and maintain.

HTML Validation

HTML and Errors

Note : HTML is not strict like a programming language, but syntax errors can still cause problems.

If you type <h7>text</h7> HTML don't tell you syntax errors and text will appear on browser

You must use proper HTML5 , CSS3 syntax to ensure that browsers process your documents properly.

Use : http://validator.w3.org/ W3C to validate your HTML5 & CSS3 code

How To use

Tags & elements

Tag : The code written inside angle brackets < >. It tells the browser what to do.

Element : The complete structure: opening tag + content + closing tag

In HTML, there are two main types of tags

Paired (Container) Tags like : . () is opening tag () closing tag
Self-closing (Void) Tags lik <hr> <img>

In HTML, there are two main types of element

Inline elements :
- Do not start on a new line
- Only take up as much width as needed
- Can be placed next to each other
- Can contain other inline elements
Block elements :
- Start on a new line
- Take up the full width
- Can contain other block or inline elements

Note : HTML automatically collapses multiple spaces and line breaks into a single space.

Heading - P - Pre

Heading

Six levels : (h1 , h2 , h3 , h4 , h5 , h6) for title inside page

Use <h1> once per page for the main title.
Search engines use headings to understand your page structure (important for SEO).
it's block element and has style .

Paragraph

HTML stands for paragraph. It's used to define blocks of text.

Block element
It creates space before and after the paragraph automatically.
Can contain inline elements like , <a>, , etc.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita necessitatibus asperiores officiis, voluptas modi beatae id ut, nihil fugit saepe nulla unde sit earum doloremque cupiditate totam optio laborum ipsum.

Preformatted text

HTML stands for "preformatted text". It tells the browser to:

Preserve spaces
Preserve tabs
Preserve line breaks


           <pre> 
          This      is
                      exactly       as
                  you      typed.             
          </pre>

HTML5

SESSION 1