Chapter 01
Introduction to HTML
Mohamed Jeeni
Web Development One.
Web development means creating websites and web applications that people use on the internet.
1. Frontend Development 2. Backend Development
This is everything you see on the screen: This is the behind-the-scenes part:
Text Databases
Images User accounts
Buttons Login systems
Colors Storing data
Layout Server communication
Frontend uses: Backend uses languages like:
HTML → structure PHP
CSS → design Python
JavaScript → actions and movement [Link]
Java
3. Full-Stack Development
A full-stack developer does both frontend and backend.
HTML
• With HTML you can create your own Website.
• the standard language used to create and structure webpages on the internet.
• HTML stands for Hyper Text Markup Language.
• It is the main language used to create the structure of webpages.
• Every website you open— Facebook, Google, YouTube— is built using HTML.
Important Features of HTML.
1. It is a Markup Language
HTML uses markup tags to describe content. 3. Works with CSS and JavaScript
2. It is Not a Programming Language To make websites beautiful and interactive:
HTML → structure
HTML cannot do logic, calculations, loops, etc.
It only structures the page. CSS → design
JavaScript → behavior / dynamic
Editors
The editors is the writing area inside it or where you create and edit your code.
Now we Use Vs code Editor
What is the Editor in VS Code?
The editor in VS Code is the main area where you type and write your code.
When you open a file (like HTML, CSS, JavaScript), the editor is the big middle space where the text appears.
Extension in Vscode
Live Server
Material Icon Theme
What HTML Does
HTML tells the browser what to display on a webpage, such
Text
Headings
Images
Links
Videos
Buttons
Forms
How HTML Works
HTML uses tags (<> … </>) to mark content.
Role of a Browser
A browser is a program like Chrome or Firefox that helps you open and view websites.
What a browser does:
Opens websites when you type a link.
Shows the page on your screen (text, pictures, videos).
Sends requests to the internet and gets data from servers.
Runs code (HTML, CSS, JavaScript) to make pages work.
Document Structure
The <!DOCTYPE html> declaration defines that this document is an HTML5 document.
The <html> element is the root element of an HTML page.
The <head> element contains meta information about the HTML page.
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the
page's tab).
The <body> element defines the document's body, and is a container for all the visible contents, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading.
The <p> element defines a paragraph.
HTML is Not Case Sensitive
• HTML tags are not case sensitive:
<P> means the same as <p>.
HTML Elements
• An HTML element is defined by a start tag, some content, and an end tag.
• The HTML element is everything from the start tag to the end tag
<tagname>Content goes here...</tagname>
Examples of some HTML elements:-
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
Nested HTML Elements
• HTML elements can be nested (this means that elements can contain other elements).
• All HTML documents consist of nested HTML elements.
• The following example contains four HTML elements ( <html>, <body>, <h1> and <p> )
Example
<!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>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
• The <html> element is the root element and it defines the whole HTML
document.
It has a start tag <html> and an end tag </html>.
• Then, inside the <html> there is a element <body> element:
• The <body> element defines the document's body.
It has a start tag <body> and an end tag </body>.
• Then, inside the <body> element there are two other elements: <h1> and <p>.
• The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>
• The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>
Never Skip the End Tag
Some HTML elements will display correctly, even if you forget the end tag.
Example
<html>
<body>
<p> This is a paragraph
<p> This is a paragraph
</body>
</html>
Always close your HTML tags! If you forget, the page may not work correctly at some times.
Empty HTML Elements
HTML elements with no content are called empty elements.
The <br> tag defines a line break, and is an empty element without a closing tag.
Example
<p> This is a <br> paragraph with a line break.</p>
HTML Headings
HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage.
Example HTML headings are defined with the <h1> to <h6> tags.
Heading 1
<h1> defines the most important heading.
Heading 2 <h6> defines the least important heading.
Heading 3 Example
Heading 4 <h1>Heading 1</h1>
Heading 5 <h2>Heading 2</h2>
Heading 6 <h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Headings Are Important
Search engines use the headings to index the structure and content of your web pages.
<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and
so on.
For example:
<h1> - Page title
<h2> - Section titles
<h3> - Sub-sections
HTML Paragraphs
A paragraph always starts on a new line, and is usually a block of text.
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and
after a paragraph.
Example
<p> This is a paragraph. </p>
<p> This is another paragraph. </p>
HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.
The browser will automatically remove any extra spaces and lines when the page is displayed.
Example
<p> <p>
This paragraph This paragraph
contains a lot of lines contains a lot of
in the source code, spaces
but the browser in the source code,
ignores it. but the browser
</p> ignores it.
</p>
HTML Horizontal Rules
The <hr> tag defines a break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page.
Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
The <hr> tag is an empty tag, which means that it has no end tag.
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph.
Example
<p> This is<br>a paragraph<br>with line breaks.</p>
The <br> tag is an empty tag, which means that it has no end tag.
HTML Attributes
• HTML attributes provide additional information about HTML elements.
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to.
Example
<a href="[Link] W3Schools</a>
The src Attribute
The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be displayed.
Example
<img src="img_girl.jpg">
Ways to specify the URL
There are two ways to specify the URL in the src attribute:
1. Absolute URL:- Links to an external image that is hosted on another website.
Example: src="[Link]
2. Relative URL:- Links to an image that is hosted within the website.
Example: src="img_girl.jpg".
If the URL begins without a slash /, it will be relative to the current page. Example: src="img_girl.jpg".
If the URL begins with a slash /, it will be relative to the domain. Example: src="/images/img_girl.jpg".
The width and height Attributes.
The <img> tag should also contain the width and height attributes, which specify the width and height of the image ( in
pixels).
Example
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be
displayed.
This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
Example
<p style="color:red;" >This is a red paragraph.</p>
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the language of the Web page.
Example
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
The title Attribute
The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a This is my paragraph when you mouse over the
element.
Example
<p title="This is my paragraph">This is a paragraph.</p>
Single or Double Quotes
Double quotes around attribute values are the most common in HTML, but single quotes can
also be used.
In some situations, when the attribute value itself contains double quotes, it is necessary to use
single quotes.
HTML Comments
HTML comments are not displayed in the browser, but they can help document your HTML source code.
<!-- Write your comments here -->
<!-- <p>This is another paragraph </p> -->
Hide Inline Content
Comments can be used to hide parts in the middle of the HTML code.
<p>This <!-- great text --> is a paragraph.</p>
Next Chapter 02
Working with Text
Mohamed Jeeni