Scribd
Upload
14 views14 pages

HTML and CSS

HTML AND CSS IT IS ALL ABOUT BASICS

Uploaded by

grapilonk
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
14 views14 pages

HTML and CSS

HTML AND CSS IT IS ALL ABOUT BASICS

Uploaded by

grapilonk
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/ 14

HTML Introduction

What exactly is HTML?


● HTML is an abbreviation for Hypertext Markup Language.
● HTML is the most commonly used markup language for producing Web pages.
● The framework of a Web page is described in HTML.
● HTML is made up of a number of elements.
● HTML components instruct browsers on how to show content.
● HTML components designate material that includes "this is a heading", "this is a
paragraph", "this is a link", and others.

Basic HTML Document


Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My first-ever heading</h1>


<p>My first-ever paragraph.</p>

</body>
</html>

Explanation of an Example
● The <!DOCTYPE html> This statement specifies that the content of the document is
5HTML.
● The <html> is the main component of an HTML page is an element.
● The <head> element carries meta-data regarding the HTML page.
● The <title> element defines an HTML page header (which appears within the browser's
title bar or in the header of the page's window).
● The <body> element specifies the body of a file and serves as a receptacle for each of the
viewable items consisting of headings, paragraphs, graphics, hyperlinks, tables, lists, and
others.
● The <h1> element specifies a huge heading
● The <p> element explains an article

What exactly is an HTML Element?


A start tag, certain information, and an end tag constitute an HTML element:
<tagname> This is where the text enters... </tagname>
Anything from the start tag to the end tag is an HTML element:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Starting tag The element's content Ending tag

<h1> My first-ever heading </h1>

<p> This is my very first </p>


paragraph.

<br> none none

Please keep in mind that some HTML components do not include content (such as the <br>
element). They are known as empty elements. There is no ending tag for empty elements!
HTML Elements That Are Nested
HTML elements are capable of being nested, which means they may include other elements
within them.

>DGDO<
1
Every HTML document is made up of nested HTML elements.
Four HTML elements are used in this particular sample (<html>, <body>, <h1> and <p>):
Example
<!DOCTYPE html>
<html>
<body>

<h1>My first-ever heading</h1>


<p>This is my very first paragraph.</p>

</body>
</html>

Explanation of the Example


The <html> element is the root element, which defines the whole HTML document.
It has a beginning tag <html> as well as an end tag </html>.
Then, within the < html>, there is a component <body> element: <body>

<h1>My first-ever heading</h1>


<p>This is my very first paragraph.</p>

</body>
The <body> element describes the body of the document.
It has a beginning tag <body> as well as an end tag </body>.
Then, within the <body> element, there are additionally two more
components: <h1> and <p>:
<h1>My first-ever heading</h1>
<p>This is my very first paragraph.</p>
The <h1> element describes a heading.
It has a beginning tag <h1> as well as an end tag </h1>:
<h1>My first-ever heading</h1>
The <p> element describes a paragraph.
It has a beginning tag <p> as well as an end tag </p>:
<p>This is my very first paragraph.</p>

Web browsers
A web browser (Chrome, Edge, Firefox, or Safari) reads HTML documents and displays them
appropriately.
The HTML tags aren't displayed by the browser; however, they are used to figure out how to
show the document.

>DGDO<
2
Structure of an HTML Page
An example of an HTML page structure is shown below:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is my heading</h1>
<p>This is my paragraph.</p>
<p>This is my other paragraph.</p>
</body>
</html>
Please keep in mind that the information included within the <body> is going to show the
section. The information contained within the <title> element will appear in the browser's title
bar or the page's tab.

HTML Evolution
It is believed that there have been multiple releases of HTML since the very beginning of the
World Wide Web:
Year Version

1989 Tim Berners-Lee created the World Wide Web.

1991 HTML was created by Tim Berners-Lee

1993 HTML+ was initially developed by Dave Raggett

1995 HTML 2.0 was established by the HTML Working Group

1997 HTML 3.2 is a W3C recommendation.

1999 HTML 4.01 is a W3C recommendation.

2000 XHTML 1.0 is a W3C recommendation.

2008 5HTML First Public Draft by WHATWG

2012 5HTML Living Standard from WHATWG

2014 5HTML is a W3C recommendation.

2016 HTML 5.1 is a W3C Candidate Recommendation.

2017 HTML 5.1 2nd Edition is a W3C recommendation.

2017 HTML 5.2 is a W3C recommendation.


Employing Notepad as well as TextEdit, you can discover HTML.
Expert HTML programmers may be used to design and modify web pages.
When understanding HTML, experts nevertheless suggest applying a basic text editor such as
Notepad (PC) or TextEdit (Mac).
Everyone feels that learning HTML is best accomplished through the use of a simple text
editor.
When creating your initial web page with Notepad or TextEdit, follow the instructions
provided.

Step 1: Launch Notepad (on a PC).


Windows 8 and up
Launch the Start Screen (the window icon in the bottom left corner of your computer screen).
Enter Notepad.

>DGDO<
3
Windows 7 and older:
Navigate to Start > Programs > Accessories > Notepad.

Step 2: Create Your HTML


Using Notepad, type or take the text that follows the HTML code:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Step 3: Save the HTML Page


Ideally, you should save the document to your PC. Using the Notepad menu, go to File > Save
As.
Create the filename "index.htm" and set the encoding to UTF-8 (the standard format for HTML
files).

You are going to utilize the .htm or .html filename extensions. It seems that there isn't any
distinction; it is entirely up to you.
Step 4: Open the HTML Page in your web browser.
Load the saved HTML file in the browser of your choice (double-click or right-click and select
"Open with").
The final outcome will appear somewhat like the following:

>DGDO<
4
Documents in HTML
Each HTML file must begin with a statement of the document format: <!DOCTYPE html>.
The HTML document starts with <html> and concludes with </html>.
The viewable component of the HTML content is located between <body> and as </body>.
Example
<!DOCTYPE html>
<html>
<body>

<h1>My very first Heading</h1>


<p>My very first paragraph.</p>

</body>
</html>
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration defines the document format and assists browsers in
accurately displaying web pages.
It is limited to appearing directly on the page, at the top of the page (before any HTML tags).
The <!DOCTYPE> The statement is not concerned about the case.
The <!DOCTYPE> declaration for 5HTML is: <!DOCTYPE html>

Headings in HTML
HTML heads are specified using the <h1> to <h6> tags.
<h1> particularly significant heading is defined. <h6>describes the least significant heading:
Example
<h1>This is my heading 1</h1>
<h2>This is my heading 2</h2>
<h3>This is my heading 3</h3>

Paragraphs in HTML
The HTML paragraph is specified by the <p> tag:
Example
<p>This is my paragraph.</p>
<p>This is my other paragraph.</p>

Links in HTML
HTML links are created using the <a> tag:
Example
<a href="https://www.google.com">This is what I link</a>
The href attribute specifies the link's destination.
Attributes are employed to add extra details to HTML elements.

Image tags in HTML


The HTML image tag is used to define images in the HTML <img> tag.
As attributes, the source file (src), alternative text (alt), width, and height are given as
follows:
Example
<img src="google.jpg" alt="Google.com" width="104" height="142">

>DGDO<
5
View HTML Source Code:
Right-click an HTML document and choose "View Page Source" (in Chrome), "View Source"
(in Edge), or anything similar across all browsers. Clicking opens a window with the page's
HTML source code.

Examine an HTML Element:


To find out what components are composed of, right-click on an element (or a blank area) and
select "Inspect" or "Inspect Element" (since you are able to view both the HTML and the CSS).
Users are able to make live changes to the HTML or CSS in the Elements or Styles panels that
appear.

Styles for HTML


Color, typeface, size, and other styles can be added to a specific element using the HTML
style attribute.

Example
I am Red
I am Blue
I am Big
The HTML Attribute Style
The style attribute may be used to change the appearance of an HTML element.
The syntax that is used for the HTML style attribute is as follows:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.

Background Color
The CSS background-color property specifies the color of an HTML element's background.

Example
Set a page's background color to powder blue:
<body style="background-color:powderblue;">

<h1>This is my heading</h1>
<p>This is my paragraph./p>

</body>
Example
Set the background color into two different elements:
<body>

<h1 style="background-color:powderblue;">This is my heading</h1>


<p style="background-color:tomato;">This is my paragraph.</p>

</body>

Text Color
The CSS color property describes the text color for an HTML element:
Example
<h1 style="color:pink;">This is my heading</h1>
<p style="color:orange;">This is my paragraph.</p>

Fonts
The CSS font-family property describes the font to be utilized for an HTML element:
Example
<h1 style="font-family:arial;">This is my heading</h1>
<p style="font-family:calibri;">This is my paragraph.</p>

Text Size
The CSS font-size property describes the text size for an HTML element:

>DGDO<
6
Example
<h1 style="font-size:350%;">This is my heading</h1>
<p style="font-size:150%;">This is my paragraph.</p>

Text Alignment
The CSS text-align property describes the horizontal text alignment of an HTML element.
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:justify;">Justified paragraph.</p>

Text Formatting in HTML


HTML has a number of elements for constructing text with an associated significance.

Example
This text is bold
This text is in italics.
This is subscript and superscript

Elements of HTML Formatting


Formatting components were created for showing different forms of text:
● <b> - Make the text Bold
● <strong> - Significant text
● <i> - Italized text
● <em>:- Emphasized text
● <mark> - Marked text
● <small> - Smaller text
● <del> - Deleted text
● <ins> - Inserted text
● <sub> - Subscript text
● <sup> - Superscript text

HTML <b> as well as <strong> Elements


The HTML <b> element indicates bold text, with no added significance.
Example
<b>My text is bold</b>
The HTML <strong> element text is defined in a significant way. The material is usually
shown in bold.
Example
<strong>My text is very important!</strong>
HTML <i> as well as <em> Elements
The HTML <i> element describes a section of writing in a different voice or mood. The
information is usually shown in italics.
Tip: The <i> tag is frequently employed to denote a technical term, an expression from a
different tongue, an idea, a ship name, and others.
Example
<i>My text is italic</i>
The HTML <em> element Text that has been highlighted is defined. The information is usually
shown in italics.
A reader on your computer is going to read the text aloud to you <em> with emphasis, using
verbal stress.
Example
<em>My text is emphasized</em>
HTML <small> Element
The HTML <small> element describes a smaller text:
Example
<small>This is some of my smaller text.</small>
HTML <mark> Element
The HTML <mark> element describes text that must be highlighted or marked:
Example
<p>Please don’t forget to buy <mark> my milk</mark> today.</p>
HTML <del> Element
>DGDO<
7
The HTML <del> element describes text that has been removed from a document. Browsers
tend to slash over erased text.
Example
<p>My favorite color is <del>red</del>blue.</p>
HTML <ins> Element
The HTML <ins> element describes text that was recently placed into a document. In most
cases, browsers will highlight the entered text.

Example
<p>My favorite color is <del>red</del> <ins>blue</ins>.</p>

HTML <sub> Element


The HTML <sub> element's subscript text is defined. Subscript text is produced in shorter
fonts and displays half a character beneath the main line. Chemical formulas, for example,
H2O, can benefit from subscript text.
Example
<p>This is <sub>subscripted/sub> text.</p>

HTML <sup> Element


The HTML <sup> element, Superscript text, is defined. Superscript text is produced in shorter
fonts and displays half a character above the standard line. Footnotes, for example, WWW [1],
can be written in superscript text.
Example
<p>This is <sup>superscripted</sup> text.</p>

HTML Text Formatting Elements


Tag Overview

<b> A description of bold text

<em> The text that has been highlighted is defined.

<i> Describes a section of writing in a different voice or mood.

<small> Smaller text is defined as

<strong> Text that describes significant phrases

<sub> Subscripted text is defined.

<sup> This term refers to superscripted text.

<ins> The text that has been inserted is defined.

<del> Text that has been deleted is defined.

<mark> Text that has been marked or highlighted

HTML Color Schemes


HTML colors can be provided using color names or RGB, HEX, HSL, RGBA, or HSLA values.

Color Codes
A color can be determined in HTML through the use of a color label:

Red
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue

>DGDO<
8
Violet
LightGray
Color of the Background
Users can change the background color of HTML components as follows:
Hello Philippines

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.

Example
<h1 style="background-color:SlateBlue;">Hello Philippines</h1>
<p style="background-color:Orange;">Lorem.....</p>

The color of the text


Users can change the color of the text.
Hello Philippines
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.
The quick brown fox jumps over the head of the lazy dog.
Example
<h1 style="color:Orange;">Hello Philippines</h1>
<p style="color:SlateBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">The quick brown...</p>
Border Color
You can set the color of borders:
Hello Philippines
Hello Philippines
Hello Philippines
Example
<h1 style="border:2px solid Orange;">Hello Philippines</h1>
<h1 style="border:2px solid SlateBlue;">Hello Philippines</h1>
<h1 style="border:2px solid Violet;">Hello Philippines</h1>

Values of Color
Colors are able to be given in HTML using RGB values, HEX values, HSL values, RGBA values,
and HSLA values.
Each of the three preceding <div> background colors of components is specified using RGB,
HEX, and HSL values:

rgb (255, 99, 71)


#ff6347
hsl (9, 100%, 64%)
The background color of the following two <div> elements has been set using RGBA and
HSLA values, respectively. Add an Alpha channel to the color (in this case, there is 50%
transparency): ba(255, 99, 71, 0.5)
hsla (9, 100%, 64%, 0.5)
Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

CSS Styles for HTML


CSS is an abbreviation for Cascading Style Sheets.
CSS reduces an essential amount of work. It has the ability to handle the layout of numerous
web pages at the same time.

>DGDO<
9
CSS = Styles and Colors
Manipulate Text
Colors and Boxes

What exactly is CSS?


Cascading Style Sheets (CSS) are employed for setting up a webpage's design.
CSS allows users to determine the color, font, text size, distance among elements, how
components are arranged and organized, which background images or background colors are
appropriate for various display options for various platforms and sizes of displays, and several
other things!
Cascading implies that a style utilized by a parent element applies to all children elements
inside the parent. As a result, once you've set the color of the body text to "blue," every heading,
paragraph, and various other text elements inside the body will be the same color (with the
exception of you indicating otherwise)!

CSS Implementation
There are three techniques to include CSS in HTML documents:
● Inline: Applying the style property within HTML elements
● Internal: by employing a <style> component of the <head> section
● External: by utilizing a <link> to navigate to an outside CSS element
The most usual way of adding CSS is to preserve the styles in separate CSS files.

Inline CSS
Inline CSS is employed to give a distinct style to a particular HTML element.
Inline CSS takes advantage of an HTML element's style attribute.

The preceding instance alters the color of the content in the <h1> blue element, and the text
color of the <p> element to red:
Example
<h1 style="color:blue;">A Blue Title</h1>

<p style="color:red;">A paragraph in red.</p>

CSS Internal
A single HTML page's style is defined using internal CSS.
This defines the internal CSS <head> construction of an HTML page within
a <style> element.
The preceding instance alters the color of ALL the text <h1> elements (on a particular page)
to blue, as well as the text color of EVERYTHING <p> components to red. Furthermore, the
page is going to be shown with a "powder-blue" background
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powder-blue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is my heading</h1>
<p>This is my paragraph.</p>

</body>
</html>

>DGDO<
10
CSS External
Several HTML pages employ an external style sheet to set up their style.
If you want to employ an external style sheet, include an address to it in the <head> every
HTML page's section:

Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is my heading</h1>
<p>This is my paragraph.</p>

</body>
</html>
Every text editor is used to create the external style sheet. The file needs to be stored having a
.css extension and not include any HTML code.
The "styles.css" file appears to be this:

"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
Use an external style sheet to modify the appearance of a full website by modifying only a
single file!

CSS Colors, Fonts and Sizes


The CSS color attribute specifies the text color.
The font-family CSS attribute specifies the font family that is to be utilized.
The font-size CSS attribute specifies the text size to be utilized.
Example
CSS color, font-family, and font-size attributes are used:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:red;
font-family:arial;
font-size: 400%;
}
p{
color:blue;
font-family: courier;
font-size: 150%;
}
</style>
</head>
<body>

>DGDO<
11
<h1>This is my heading</h1>
<p>This is my paragraph.</p>

</body>
</html>

Border CSS
CSS border specifies a boundary surrounding an HTML element.
Someone may set a border to almost any HTML element.
Example
CSS border property usage:
p{
border: 2px solid powderblue;
}

Padding in CSS
The CSS padding property specifies the amount of space (padding) across the text as well as
the border.
Example
CSS border, as well as padding attributes, are used:
p{
border: 2px solid powderblue;
padding: 30px;
}

CSS Margin
The CSS margin property specifies a margin (space) on the outside of the border.
Example
CSS border as well as margin properties:
p{
border: 2px solid powderblue;
margin: 50px;
}

Image tags in HTML


Images can enhance the design and presentation of a website.

Example
<img src="pic1.jpg" alt="Picture 2">
Example
<img src="pic2.jpg" alt="Picture 3">
Example
<img src="pic3.jpg" alt="Picture 1">

Syntax of HTML Images


The HTML code <img> Tags are employed for incorporating images into web pages.
Images are attached to web pages rather than being put into them.
The <img>tag makes a placeholder for the specified image.
The <img> tag is unfilled; it merely includes attributes and lacks an ending tag.
The <img> tag must have two attributes:
● src - Specifies the image's path.
● alt - Defines the image's alternate text.
Syntax
<img src="url" alt="alternatetext">
The Attribute src
The necessary src property indicates the image's path (URL).
It should be noted that each time a web page takes off, it is the browser that retrieves the
picture from a web server and puts it within the page. As a result, ensure that the image
remains in the same location with respect to the web page, or else your visitors will see an

>DGDO<
12
invalid link indicator. If the browser cannot find the image, the incorrect link icon and alt text
are displayed.

Example
<img src="pic1.jpg" alt="Picture 2">

The alternative Attribute


The necessary alt element gives replacement text to an image if the individual using it is unable
to see it for a particular reason (due to a sluggish interaction and a mistake in the src attribute,
or perhaps the user is using a screen viewer).
The alt property value should explain the image:

Example
<img src="pic1.jpg" alt="Picture 2">
Whenever a browser fails to identify a picture, it will show the alt attribute value:

Example
<img src="pic3.gif" alt="Picture 2">
A screen reader is a piece of software that interprets HTML code and lets the person using
it "listen" to the data. Individuals who have vision problems or are mentally handicapped
can benefit from device readers.

The width as well as height of an image


The height as well as the width of a picture can be specified using the style attribute.

Example
<img src="pic1.jpg" alt="Picture 1" style="width:600px;height:700px;">
Everyone can also utilize the width and height attributes:

Example
<img src="pic1.jpg" alt="Picture 2" width="600" height="700">
The width and height attributes consistently indicate the dimension of the picture in pixels.
Definitely give the image's dimensions. The web page may flash while the image appears if
width and height aren't provided.

Width and height, or style?


In HTML, the width, height, and style properties are all considered acceptable.
Nevertheless, we recommend that you use the style attribute. It prohibits style sheets from
modifying picture sizes:

Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="5html.gif" alt="5HTML Icon" width="130" height="130">
<img src="5html.gif" alt="5HTML Icon" style="width:130px;height:130px;">
</body>
</html>

Images in a Different Folder


Whenever the pictures are in a subfolder, specify the folder name in the src attribute:

>DGDO<
13
Example
<img src="/images/5html.gif" alt="5HTML Icon" style="width:130px;height:130px;">

Images on a Different Server or Website


Certain websites direct visitors to a picture hosted on a different server.
When you want to point to a picture on a different server, use a complete (full) URL in the src
attribute:

Example
<img src="https://www.google.com/images/google_pink.jpg" alt="Google.com">
Remarks on external photos: External pictures may be protected by copyright. Some of you
might be in breach of copyright laws when you don't ask for permission to employ it.
Furthermore, you have no control over external photos; these can be deleted or modified at
any time.

Animated Pictures
HTML supports animated GIFs.

Example
<img src="flies.gif" alt="Flies Man" style="width:50px;height:50px;">

Image as a Links
Insert the image as a hyperlink in the <img> tag within the <a> tag:
Example
<a href="default.asp">
<img src="heart.gif" alt="Python Tutorial" style="width:50px;height:50px;">
</a>

Image Formats That Are Common


The following are the most popular picture file types accepted by every browser (Chrome,
Edge, Firefox, Safari, and Opera)

The acronym File Type The File Extension

APNG Animated Portable Network Graphics .apng

GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur

JPEG Joint Photographic Expert Group image .jpg,.jpeg,.jfif,.pjpeg,.pjp

PNG Portable Network Graphics .png

SVG Scalable Vector Graphics .svg

>DGDO<
14

You might also like