Scribd
Upload
7 views

Vs codeis a source code editor (7)

The document provides an overview of how websites function, detailing the roles of clients, browsers, and servers in web communication. It explains the structure and purpose of HTML documents, the importance of CSS and JavaScript for styling and interactivity, and introduces key HTML elements and attributes. Additionally, it covers the basics of creating a website, including file organization, linking styles and scripts, and the fundamental tags used in HTML.

Uploaded by

Amal B'w
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Vs codeis a source code editor (7)

The document provides an overview of how websites function, detailing the roles of clients, browsers, and servers in web communication. It explains the structure and purpose of HTML documents, the importance of CSS and JavaScript for styling and interactivity, and introduces key HTML elements and attributes. Additionally, it covers the basics of creating a website, including file organization, linking styles and scripts, and the fundamental tags used in HTML.

Uploaded by

Amal B'w
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

Chapter 0– Introduction :

VS Code: A source code editor.

How does a website work?

The process of communication between the client, browser, and server is as follows:

1. The client sends a request.


2. The browser forwards the request to the server.
3. The server processes the request.
4. The server sends the data back to the browser.
5. The browser displays the data to the client.

When we want to access any information on the internet, we search for it using a
web browser. The web browser retrieves the content from web servers, where it is
stored in the form of HTML documents.

An HTML document is created by writing code with specific tags in a code editor
of your choice. The document is then saved with the '.html' extension. Once
saved, the browser interprets the HTML document, reads it, and renders the web
page.

The text editor has the HTML code of a website. This website can now be viewed
in a beautifully rendered format using a computer program known as a web
browser.

What is a Web Browser?


A web browser is a program that understands HTML tags and renders them in a
human-readable format that is easily viewable by people visiting the website.

A browser is an application that reads HTML documents and displays them as web
pages.
What is an HTML Document?
An HTML document is a text document saved with the '.html' or '.htm' extension,
containing text and specific tags enclosed in '< >

What is a Rendered Page:


The rendered page is the output screen of our HTML Document which is the page
displayed on the browser.

How does a basic website work?


• Web Browser(client) requests websites like www.codewithharry.com from
the web server.
• Web server in return sends HTML, CSS, and JavaScript files to it.
• HTML, CSS, and JavaScript files are parsed by a web browser which is
responsible for showing you a beautiful website.

How does a browser work?


A web browser processes and displays HTML as web pages. Since browsers can't
directly access stored content, they request it from a server, which responds with
the necessary files.

Browsers handle two key tasks:

1. Parsing – Converts raw data into characters, tokens, and nodes, organizing
them into a DOM (Document Object Model) tree.
2. Rendering – The DOM tree is processed, styled, and displayed on the
screen.

The Backend
The backend, handles behind-the-scenes operations like storing and processing
data when users interact with the frontend. It uses languages like Python, Ruby,
and Java.

The Frontend
• Frontend refers to the visible part of a website or app that users interact
with, like the tables, images, and buttons. It's built using languages like
HTML, CSS, and JavaScript.
• HTML: The structure of a webpage.
• CSS: The style and design of the page.
• JavaScript: Adds interactivity and dynamic content to the website.

In essence, frontend is what users see, while backend manages the functionality.

Git and GitHub


• Git is an open-source version control system.
• GitHub is a platform owned by Microsoft that helps you host repositories
and collaborate remotely using Git.

File Organization
• For HTML: index.html
• For CSS: style.css
• For JavaScript: script.js

Linking CSS and JavaScript Files to HTML


1. Linking a CSS file to HTML: In the <head> section of your HTML file:

<link rel="stylesheet" href="style.css">

2. Linking a JavaScript file to HTML: In the <body> section of your HTML


file:

<script src="script.js"></script>

HTML : Hyper Text Mark Up language : 'Hypertext' refers to the linking of text with
other documents, while 'markup language' denotes a language that utilizes a
specific set of tags.

HTML is the language of the web. It is used to create websites.

is a markup language not a programming language

We use HTML tags to defne look & feel of a websile

What is an HTML Element?

HTML Element = Start Tag + Content + End Tag

What is a Nested HTML Element?


Nested HTML Element = One HTML Element Inside Another HTML Element

In this example, the <b> element (child) is nested inside the <h1> element
(parent).

What is an Empty HTML Element or void elements or self-closing elements ?

Empty HTML Element = Tags with No Content

HTML Attributes
HTML attributes are used to define the characteristics of an HTML element

They are placed within the element's opening tag and consist of two
parts: the name and the value.
• Name: Specifies the property for that element.
• Value: Sets the value of that property for the element.

Types of HTML Attributes


There are three main types of HTML attributes:

Types d'attributs HTML


1. Attributs de base : Appliqués à la plupart des éléments HTML.
Exemples :
a. id, class, title, style.
2. Attributs d'internationalisation : Adaptent le document aux langues et
régions.
Exemples :
a. lang, dir.
3. Attributs génériques : Fournissent des informations supplémentaires sans
affecter l'apparence.
Exemples :
a. data-*.

Core attributes are some of the most widely used attributes in HTML. There are
four main types:
• id
• class
• title
• Style

HTML Id & Classes


HTML offers multiple ways to select and style elements. Two of the most
commonly used selectors are IDs and Classes. This blog explores what they are,
how to use them, and their differences.

ID Attribute :
An ID is an attribute, a unique identifier assigned to only one HTML element within
a page. It is often used for unique styling and JavaScript manipulations.

<div id="myUniqueID">This is a div with an ID.</div>

Class Attribute :
The class attribute lets you give the same name to multiple HTML elements. That
way, you can easily change their look or behavior all at once. Classes are not
unique and can be assigned to multiple elements.

The Style Tag


The style tag in HTML is used to include embedded CSS (Cascading Style Sheets)
within an HTML document. It is commonly placed within the <head> section of the
HTML file, although it can technically be used in the <body> as well. The style tag
allows you to define the look and feel of various HTML elements on the page,
including their colors, sizes, margins, and other visual styles.

Here's a simple example:

<head>
<style>
/* CSS rules go here */
p {
color: blue;
font-size: 18px;
}
. highlight {
background-color: yellow;
}
</style>

Using IDs and Classes in CSS


In CSS, elements with IDs are selected using a hash (#) symbol before the ID, and
elements with classes are selected using a dot (.) before the class name

Title Attribute :
The title attribute shows a small text when you move the mouse over an element.

Style Attribute :
The style attribute applies CSS directly to an element for quick styling.

<p style="color: red;">This text is red</p>

HTML Comments :
Comments in HTML are like little notes you leave in your code for yourself or other
people.

These notes help make the code easier to understand but don't show up on the
actual website. The web browser just skips over them!

Types of Comments in HTML


HTML primarily supports two types of comments:

Single-line Comments
Single-line comments are contained within one line. They are useful for short
annotations.

<!-- This is a single-line comment -->


Multi-line Comments
Multi-line comments span across multiple lines, making them ideal for detailed
explanations or temporarily disabling blocks of code.

<!--
This is a multi-line comment.
It spans multiple lines.
-->

Then Why CSS & JavaScript:


HTML is the skeleton that structures your content ,It creates the structure of a
webpage.

CSS (Cascading Style Sheets) – Styling: It controls the design and layout of a
webpage.

JavaScript – Interactivity & Behavior : It adds functionality and interactivity to a


webpage.

✔ HTML → Provides content and structure.


✔ CSS → Makes it visually appealing.
✔ JavaScript → Adds interactivity and functionality.

Chapter 1- Creating our frst website :


We start building is website by creating a file named index.html

A Basic HTML Page :


Main HTML Tags

Skeletal Tags
<!DOCTYPE html>: "Specifies the document type

<html> Tag: "Root of an HTML Page"

<html> </html>

The <html> tag is the root element that wraps all the content on the page. It
generally contains two main sections: the header (<head>...</head>) and the
body (<body>...</body>).

<head> Tag: "Header Part of an HTML Page"


<head> </head>

The <head> tag contains meta information and the title of the document. While
the title appears in the browser tab, meta information is often used for SEO
purposes.

title> Tag: "Title Part of an HTML Page"


<title> </title>
The <title> tag defines the title of the document, which is displayed in the
browser's title tab.

<body> Tag: "Body Part of an HTML Page"


<body> </body>
The <body> tag encloses the main content of the page, and everything within this
tag is displayed in the browser.

The image below shows the skeletal tags and essential tags needed to define the
layout of a webpage

Heading Tags
In HTML, heading tags ranging from <h1> to <h6> are used to define the
structure and layout of text on a web page. These tags help create a hierarchical
organization of content, making it easier for both users and search engines to
understand the page's content.
Paragraph Tag
To create well-structured text in your HTML document, the <p> tag is essential for
defining paragraphs.

<p> Tag: Defining a Paragraph in HTML


The <p> tag is used to format text into distinct paragraphs. Each paragraph
element is separated by automatic empty line spaces above and below the
content, providing a clear visual separation. The tag must be closed with its
corresponding </p> tag.

<p> </p>

Attributes and Styling


While the <p> tag is straightforward, you can enhance its functionality using
various attributes like class or id for CSS styling. You can also include inline styles
using the style attribute.

<p class="example" style="color: blue;">this a styled pg </p>

Horizontal Line Tag


To add a horizontal line in your HTML document, the <hr> tag comes in handy.

How to use the <hr> tag?


The syntax of the hr tag looks something like this.

<hr>

The <hr> tag is an empty or self-closing tag, meaning it doesn't require a closing
tag. It serves as a visual separator, dividing different sections of your document
with a horizontal line.

Line Break Tag


To insert a line break in your HTML document, you can utilize the <br> tag.

<br> tag is used to insert line breaks in text or paragraphs

The syntax for the <br> tag looks like this:


<br>

The <br> tag is commonly referred to as an empty or self-closing tag, meaning it


doesn't require a closing tag. This tag is responsible for breaking text lines or
separating paragraphs. When implemented, it automatically moves the text
following the tag to the next line.

It's particularly useful in formatting textual content where line breaks are essential
for readability or visual layout. For instance, it can be used in addresses, poems, or
song lyrics to preserve the original line structure.

Anchor Tag
Links are fundamental to navigating the web. In HTML, links are created using the
<a> tag, also known as the Anchor tag.

Key Characteristics of HTML Links


• Specified by the <a> tag.
• Also known as hyperlinks.
• Used to link one document to another.
• Includes a closing tag </a>.

Essential Attributes of the Anchor Tag


HTML links primarily use two attributes:
• href attribute: Defines the URL the link points to.
• target attribute: Specifies where to open the linked document.
Target Attribute Values
• _blank: Opens the linked document in a new window or tab.
• _top: Opens document in the full body of the window.
• _self: Opens document in the same window or tab (default behavior).
• _parent: Opens the linked document in the parent frame.

Linking to Specific Page Sections


To link to a specific section of a webpage, you can:
• Use the name or id attribute of the target section.
• Use a hyperlink with a hash (#) followed by the target id or name.

Let's say you have a long webpage with multiple sections, and you want to create
a link at the top that, when clicked, takes the user directly to a specific section
further down the page. You can do this using HTML links that target specific
sections.

Image Tag
Images play a crucial role in enhancing web pages by providing a visual context
that complements textual content. In HTML, the <img> tag is used to embed
images into web pages.

Basic Syntax for Embedding Images


This is how the syntax to embed an image in html looks like:

<img src="image's path" />

Setting Mandatory Attributes


The "src" and "alt" attributes are essential for the proper functioning of the
<img> tag.
• src attribute: Specifies the path to the image file.
• alt attribute: Provides a text description for the image.
<img src="images/profile_picture.jpg" alt="Profile Picture"/>
Note: To find the image's location, right-click on the image, go to properties, and
check the location field.

Setting Image Dimensions


Although dimensions can be set using the "width" and "height" attributes in the
<img> tag, modern best practices recommend using CSS for this purpose.

<img src="image.png" alt="Description"width="300"height="100"/>

Note: Styling dimensions and other properties are now more commonly managed
through CSS for better flexibility and maintainability.

Pre Tag
The <pre> tag serves as an indispensable tool in HTML for displaying
preformatted text, such as code snippets in various programming languages.

What Does the <pre> Tag Do?


The <pre> tag preserves the original formatting of text, making it an excellent
choice for displaying code where spacing and indentation are key.

Syntax for Using the <pre> Tag


<pre> </pre>

When to Use the <pre> Tag?


The <pre> tag is most effective when you want the text to display on your HTML
page exactly as it was typed, without any formatting changes. It is especially useful
for displaying code snippets or preformatted text from data files.

HTML Inline Elements


Inline Elements don't start on a new line. It only takes the width required to cover
the content.

HTML elements are generally divided into two categories: Block-level and Inline
elements.

What are Inline Elements?

Inline elements in HTML are elements that:

1. Do not start on a new line and are part of the flow of surrounding content.
2. Take up only as much width as needed based on their content.
3. Can contain other inline elements, but should not contain block-level
elements (like <div> or <p>).

<span>This is <strong>important</strong> text.</span>

Common Inline Elements


• <span>: A generic inline container for text
• <a>: Defines a hyperlink
• <strong>: Defines important text
• <em>: Defines emphasized text
• <img>: Embeds an image
• <input>: Defines an input control

Styling Inline Elements


You can use CSS to style inline elements. However, some properties like width and
height may not apply.

Here is an exhaustive list of the most used Inline Elements:


• <a>
• <abbr>
• <acronym>
• <button>
• <br>
• <big>
• <bdo>
• <b>
• <cite>
• <code>
• <dfn>
• <i>
• <em>
• <img>
• <input>
• <kbd>
• <label>
• <map>
• <object>
• <output>
• <tt>
• <time>
• <samp>
• <script>
• <select>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <textarea>

HTML Block Elements


You already know about HTML inline elements. All HTML tags have specific display
behavior: they are either block-level elements or inline elements.

What are Block-level Elements?


Block-level elements are those that start on a new line and take up the entire width
of their container by default. They essentially claim all the horizontal space for
themselves, pushing any content that comes after them to a new line.

Characteristics of Block-level Elements:


• Always start on a new line.
• Take up the full width available.
• Width and height can be controlled via CSS.
• Can contain other block-level as well as inline elements.

Common Block-level Elements:


• <h1>,<h2>,<h3>,<h4>,<h5>,<h6> - Headings
• <p> - Paragraphs
• <hr> - Horizontal rule
• <address> - Address information
• <article> - Article content
• <aside> - Sidebar content
• <blockquote> - Block quotations
• <canvas> - Drawing area
• <dd> - Description in a description list
• <div> - Generic container
• <dl> - Description list
• <dt> - Term in a description list
• <fieldset> - Group of related form elements
• <figcaption> - Caption for a figure
• <figure> - Image or media with a caption
• <footer> - Footer of a section or page
• <form> - HTML form
• <header> - Header of a section or page
• <li> - List item
• <main> - Main content of a document
• <nav> - Navigation links
• <noscript> - Alternate content when JavaScript is not enabled
• <ol> - Ordered list
• <ul> - Unordered list
• <pre> - Preformatted text
• <section> - Standalone section in a document
• <table> - Table
• <video> - Video content

List Tags
1. Unordered list.
<ul>
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ul>

2. ordered list.
<ol>
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ol>
Customizing Bullet Points with 'type' Attribute
You can specify the style of bullet points using the type attribute. It
supports three values:
• disc - default bullet style
• square
• circle

Setting the 'type' Attribute


The type attribute specifies the style of numbering. You have several
options:
1. Uppercase Roman Numerals: Use type="I"
2. Lowercase Roman Numerals: Use type="i"
3. Arabic Numerals: Use type="1" (This is the default if the type attribute is
not specified)
4. Lowercase Alphabetical Letters: Use type="a"
5. Uppercase Alphabetical Letters: Use type="A"

Setting the 'start' Attribute


The start attribute specifies the starting number for the list.

<ol type="A" start="3">


<li>Pen</li>
<li>Pencil</li>
</ol>

Definition list:
HTML Definition Lists
A Definition List in HTML is used to represent a list of terms along with their
corresponding descriptions or definitions. The Definition List is created using the
<dl> (Definition List) element, which wraps around one or more pairs of <dt>
(Definition Term) and <dd> (Definition Description) elements.

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
In this example:
• <dl> is the container for the list.
• <dt> defines the terms that you want to explain.
• <dd> contains the definitions or explanations for the terms.

HTML Tables
• HTML tables allow you to arrange data like text, images, and links in rows
and columns. You use the <table> tag to start and end a table.

Syntax of HTML Table


<table>
</table>

Key Elements of HTML Table


<table>: Defines the table itself.
<tr>: Used for table rows.
<th>: Used for table headings.

<td>: Used for table cells (data).

Basic Table Structure


<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Harry</td>
<td>100</td>
</tr>
</table>

Adding a Caption
To add a title to your table, you can use the <caption> element. This element
helps both in terms of SEO and accessibility.

Table Headers and Footers


Besides <th> for individual header cells, HTML tables allow you to group header
or footer content using <thead> and <tfoot>.

<table>
<thead>
<!-- header content -->
</thead>
<tfoot>
<!-- footer content -->
</tfoot>
<tbody>
<!-- body content -->
</tbody>
</table>

Column Groups
You can use the <colgroup> and <col> elements to apply styles to an entire
column in an HTML table.

<table>
<colgroup>
<col style="background-color:yellow">
</colgroup>
<!-- rest of the table -->
</table>

Accessibility in Tables
To make your tables more accessible, you can use the scope attribute in <th>
elements to specify if they are headers for columns, rows, or groups of columns or
rows.

<th scope="col">Name</th>
<th scope="col">Age</th>

Sample HTML Table


Here is an example HTML table with all the important elements:
<table border="1">
<!-- Caption -->
<caption>Employee Information</caption>

<!-- Table Header -->


<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>

<!-- Table Body -->


<tbody>
<tr>
<td>1</td>
<td>Alice</td>
<td>Developer</td>
<td>$80,000</td>
</tr>
<tr>
<td>2</td>
<td>Bob</td>
<td>Designer</td>
<td>$70,000</td>
</tr>
<tr>
<td>3</td>
<td>Carol</td>
<td>Manager</td>
<td>$90,000</td>
</tr>
</tbody>

<!-- Table Footer -->


<tfoot>
<tr>
<td colspan="3">Total Employees</td>
<td>3</td>
</tr>
</tfoot>
</table>

Tables
<TABLE>...</TABLE> → Table definition
<TABLE width="x%"> → Table width in percentage
<TABLE width=x> → Table width in pixels
<TABLE border=x> → Border thickness
<TABLE cellpadding=x> → Space between border and text
<TABLE cellspacing=x> → Space between cells
Table Rows & Cells

<TR>...</TR> → Table row


<TD>...</TD> → Table cell

<TD bgcolor=colorcode> → Cell background color


<TD width="x%"> → Column width in percentage
<TD width=x> → Column width in pixels
<TD align=halign> → Cell alignment (left, center, right)
<TD valign=valign> → Vertical alignment (top, middle, bottom)
<TD colspan=x> → Merges multiple columns
<TD rowspan=x> → Merges multiple rows

Introduction to HTML Forms


HTML forms are essential for collecting user input on web pages. Whether it's a
search bar, a login screen, or a multi-field registration form, HTML forms play a key
role in web interactions. They enable users to submit data, which can be
processed, stored, or returned by a server.

Why Do We Use Forms?


Forms serve as the gateway between the user and the server, allowing for
dynamic, interactive web experiences. They are crucial for tasks such as user
authentication, data submission, feedback collection, and more. Simply put, forms
make websites more engaging and functional.

HTML Forms Structure:


The fundamental structure of an HTML form is encapsulated within the <form>
tags. Inside these tags, you'll place various form controls like text fields,
checkboxes, radio buttons, and buttons for submitting the form.

<form action="/submit" method="post">


<!-- Text input for username -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br><br>

<!-- Password input -->


<label for="password">Password:</label>
<input type="password" id="password" name="password"
required>
<br><br>

<!-- Radio buttons for gender -->


<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender"
value="female">
<label for="female">Female</label>
<br><br>

<!-- Submit button -->


<input type="submit" value="Submit">
</form>

How to Use Form Controls?


The <input> tag is commonly used to create form controls. The attributes of this
tag define the control's behavior.

<input type="" name="" value="">

The "type" attribute specifies the type of input control (e.g., text, password,
checkbox).

The "name" attribute is used for identifying the control, especially when the data
is sent to the server.

The "value" attribute sets a default value for the control, which the user can
overwrite.
THyperlinks
• <A href="http://...">...</A> → External link to a webpage
• <A href="mailto:[email protected]">...</A> → Email link
• <A href="file.html">...</A> → Link to a local page in the same folder
• <A name="xyz">...</A> → Anchor definition
• <A href="#xyz">...</A> → Link to an anchor in the same file
• <A href="file.html#xyz">...</A> → Link to an anchor in another file

Images
• <IMG src="imageURL"> → Inserts an image (GIF, JPG, PNG)
• <IMG ... width=x height=y> → Scales the image (in pixels)
• <IMG ... border=x> → Defines the image border thickness
• <IMG ... alt="text"> → Alternative text when image is not displayed
• <IMG ... align=valign> → Aligns image relative to text line
• <IMG ... align=halign> → Aligns text around image (left, right)
• <IMG ... hspace=x> → Horizontal spacing around the image
• <IMG ... vspace=y> → Vertical spacing around the image
• <IMG ... usemap=#map> → Uses an image map
• Image Map

<MAP name="mapname">
<AREA href="url" shape="rect" coords="x1,y1,x2,y2" alt="text">
<AREA href="url" shape="circle" coords="x,y,radius" alt="text">
<AREA href="url" shape="poly" coords="x1,y1,x2,y2,...xn,yn"
alt="text">
<AREA href="url" shape="default" alt="text">
</MAP>

rect → Rectangle
circle → Circle

poly → Polygon

default → Default shape

You might also like