Scribd
Upload
22 views

Vs Codeis a Source Code Editor (4)

The document provides an overview of how websites function, detailing the roles of clients, browsers, and servers in web communication. It explains HTML documents, their structure, and the importance of CSS and JavaScript for styling and interactivity. Additionally, it covers key HTML elements, attributes, and best practices for creating and organizing web content.

Uploaded by

Amal B'w
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

Vs Codeis a Source Code Editor (4)

The document provides an overview of how websites function, detailing the roles of clients, browsers, and servers in web communication. It explains HTML documents, their structure, and the importance of CSS and JavaScript for styling and interactivity. Additionally, it covers key HTML elements, attributes, and best practices for creating and organizing web content.

Uploaded by

Amal B'w
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

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 '< >'. These tags
provide the necessary instructions for configuring the web page.

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>
<!-- Content -->
</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>
<!-- Header Content -->
</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 Name
</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 Content
</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>
<!-- Paragraph content -->
</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 is a styled paragraph.
</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>
<!-- code snippet in any programming language -->
</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 do not start on a new line and only take up as much
width as necessary. They are part of the flow within other elements.
Inline elements can contain other inline elements, but they generally
should not contain block-level elements. For example, you could nest a
<strong> (strong emphasis) element within a <span> (a generic inline
container) element, like so:

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

However, placing a block-level element like a <div> or <p> inside an inline


element like <span> or <a> is typically considered incorrect HTML and
could lead to unexpected behavior in terms of layout and styling.

<!-- This is generally considered incorrect -->


<span>This is <div>not recommended</div> 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. <ul>: Unordered list.


<ul>
<li>Pen</li>
<li>Pencil</li>
<li>Eraser</li>
</ul>

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

Example Using Square Bullets:


<ul type="square">
<li>Notebook</li>
<li>Marker</li>
</ul>
2. <ol>: Ordered list.
<ol>
<li>Mango</li>
<li>Orange</li>
<li>Litchi</li>
</ol>
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>

3. 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 content
</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@example.com">...</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

Frames

• <FRAMESET>...</FRAMESET> → Defines a frame layout (replaces <BODY>)


• <FRAMESET rows="x%,y%,..."> → Divides the page horizontally
• <FRAMESET cols="x%,y%,..."> → Divides the page vertically
• <FRAME src="file.html"> → Loads a file inside a frame
• <NOFRAMES>...</NOFRAMES> → Content for browsers that don’t support
frames

You might also like