Introduction to HTML
Introduction to HTML
How the Web Work?
The World wide web is an Information system where documents are available over the internet.
The documents are transferred over HTTP.
HTTP (Hyper Text Transfer Protocol)
HTTP is a formally defined set of rules for communication between a client (requester) and a server (responder).
That’s really all you need to know.
www.example.com is the address we type on browser which have following parts:
- www which means world wide web
- example which is Low-level domain which is company name.
- .com is the High-level domain.
The document is it save on server, when we want to access it, the code is load on the browser and we saw a beautiful page.
Responses:
A typical webpage consists of code written in HTML, CSS and JavaScript, but it’s not rule that all 3 must use.
- HTML (the content of the page)
- CSS (the style of the page)
- JavaScript (the behavior of the page)
Roles
- HTML (Noun)
- CSS (Adjective)
- JavaScript (verb)
Installation
- It could can’t be easier!
- There is no “installing” HTML & CSS. Instead, we install an editor to write code in, and a browser to render our code.
Chrome
Or any similar modern web browser will do.
VS code
Or any other code editor (VS code is great and free)
Setting up your font size, themes and other settings
Configuring VS code
Install extensions:
- Community Material Theme
- Live server
- Auto Rename Tag
- Live Preview
Now you can make new file as HTML write file extension .html. VS code automatically recognize the file and behave like that
Introducing HTML
Hyper Text Markup Language
- make this text a link
- Make this a heading
- Make this a paragraph
The Basic HTML workflow
<h1> Hello World! </h1>
Write first code of line
You can use any kind of software or text document to write code. When you got changes in the source code and you open the file and second time you just need to refresh the page that’s it.
The Paragraph Element
H1 | Img (image) | head (header) | video (video) |
H2 | Div (box) | body (body) | span |
H3 | a (link) | main | b (bold) |
H4 | li (list) | nav (navigation menu) | i |
H5 | ul (unorder list) | form (forms) | p (paragraphs) |
H6 | ol (ordered list) | Table (tables) | Br (break line) |
First of all, there is an open tag and close tag that makes up code. <h1> is an open tag and </h1> is a close tag.
Mdn is a platform where all the resource of the HTML and CSS
Chrome Developer Tools
Must use google which is show much of the whole HTML code of the page just right click on any place of the page and click on “inspect”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Creating HTML comment
It is not a part of a code; it is use only for take notes.
<!-- Write your comments here -->
Headings
h1 is 32px (2em)
h2 is 24px (1.5em)
h3 is 18.72px (1.17em)
h4 is 16px (1em)
h5 is 13.28px (0.83em)
h6 is 10.72px (0.67em)
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
Table of Contents
Interesting Posts
The Box Model
All BS Department 1st Semester Past-papers
More HTML
CSS Grid vs. Flexbox: When to Use Each
Ghulam Ahmad is an Excellent Writer, His magical words added value in growth of our life. Highly Recommended
5 Responses
Awesome! Its genuinely remarkable post, I have got much clear idea regarding from this post
There is definately a lot to find out about this subject. I like all the points you made
Pretty! This has been a really wonderful post. Many thanks for providing these details.
Very well presented. Every quote was awesome and thanks for sharing the content. Keep sharing and keep motivating others.
Pretty! This has been a really wonderful post. Many thanks for providing these details.