Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
16 views

1.HTMLNotes

Uploaded by

dev
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

1.HTMLNotes

Uploaded by

dev
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 73

Introduction to

HTML5
What is HTML?
HTML stands for Hyper Text Markup Language.

It is one of the 3 core web development technologies, which are HTML, CSS and
JavaScript.

HTML is responsible for creating the structure of web page.

CSS is responsible for styling and formatting the HTML elements.

JavaScript is responsible for adding functionality to the HTML elements. For example,
showing a popup on a button click.
JOURNEY OF HTML
A Little History of HTML
HTML was created by Sir Tim Berners-Lee in 1 991 .

The first version which is HTML1 was released in 1 993. The main purpose of HTML was to
create web pages for sharing information.

The latest version, HTML5 was released in 2014 which brings HTML to pace up with the
rapid evolving Web Development.
STRUCTURE OF HTML
DOCUMENTS
Structure of an HTML Document
<!DOCTYPE HTML>
<html>
<head>
<title>Your Website Title</title>
</head>
<body>
<!-- Code to design structure of the webpage -->
</body>
</html>
What are HTML tags??
An HTML tag is a combination of characters enclosed in angle brackets. Each tag has a
different purpose.
For example,
<p></p> is a paragraph tag.
<img src=”image-path” /> is an image tag. Here “src” is an attribute.

There are two types of tags in HTML - Paired and Unpaired Tags.
Some tags need a closing tag because they enclose some content like <p>, <h1 > etc.
These are called Paired tags.

On the other hand, some tags don't need a closing tag like <img />, <br /> etc. These are
called Unpaired tags or self-closing.
Code Editor Setup
CODEPEN:
We will be using codepen for single web page practice problems, assignments and
projects.

VISUAL STUDIO CODE:


For multiple web page practice problems, assignments and projects.
BASIC TAGS
Headings
HTML provides us with 6 different heading tags - <h1 > to <h6> where <h1 > represents the
most important heading and <h6> represents the least important one.
For example,
<h1> I am the h1 heading </h1>
<h2> I am the h2 heading </h2>
<h3> I am the h3 heading </h3>
<h4> I am the h4 heading </h4>
<h5> I am the h5 heading </h5>
<h6> I am the h6 heading </h6>

Quick Tip: You can have as many heading tags as you want in an HTML page but it is
recommended to have only one <h1 > tag to represent the main heading.
Text Related Tags
You can use <p> tag to add a paragraph.

For example,
<p>Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its
whole life believing that it is stupid.</p>

If you want to emphasize on some words, you can can use <b> tag.
If you want to make some words italics, you can use <i> tag.

If you want to have the above sentences in different lines, you can use the <br> tag or pre-
formatted <pre> tag.
Embedding Images in Webpage
We can use image tag to embed images.
For example,
<img src="http://www.onetravelgirl.com/wp-
content/uploads/2019/01/beautiful-mountains-of-the-world.jpg"
alt="Beautiful Mountains" />

We can also give it a fixed width and height by using the “width” and “height” attributes.
<img src="http://www.onetravelgirl.com/wp-
content/uploads/2019/01/beautiful-mountains-of-the-world.jpg"
alt="Beautiful Mountains" width="600" height="350" />
The “src” and “alt” Attributes
The “src” attribute:
We add the source attribute to give the location of the image. The image can be either
online or offline.

The “alt” attribute:


This is an alternate text for image. It has two main purpose.
First, if the image could not be loaded for any reason, it shows this text to your website
users.
Second, this attribute helps search engines index the image.
How to create Lists?? [Ordered List]
There are 2 types of lists:
● Ordered List
● Unordered List.

You can use the <ol></ol> tag to create an ordered list and to create list items you can
use <li></li> tags. Ordered Lists have a sequence. This sequence can be:
● Numbers: 1 , 2, 3,....
● Uppercase Alphabets: A, B, C, ...
● Lowercase Alphabets: a, b, c, ...
● Uppercase Roman Numerals: I, II, III, IV, …
● Lowercase Roman Numerals: i, ii, iii, iv, …
We can change this sequence by using the CSS property “list-style-type”
How to create Lists?? [Unordered List]
Unordered Lists have NO sequence. They are more like bullet points.

You can use the <ul></ul> tag to create an unordered list and to create list items you can
use <li></li> tags.

The unordered list also has different styles:


● Disc
● Square
● Circle
● None
BASIC STYLING
SYNTAX
Syntax for Adding Inline Styles to HTML Elements
To add CSS styles, HTML provides us with an attribute, called "style".

This is one way to add styles to HTML elements:


<elem style="property-name: value;"></elem>

For example,
<p style="font-size: 24px; color: blue;"></p>
Basic HTML Styling using CSS

Let’s try following properties:


● Font Size
● Font Color
● Custom Font
● Background Color
● Box Model
● Margin-xy
● Padding-xy
● Font Weight
● Border
● Border Radius
● Shadows
Introduction to the “class” attribute
HTML provides us with an attribute called “class” for adding same styles to multiple HTML
elements.

Syntax:
<h2 class=”top-heading”>Main Heading 1</h2>

For example:
<h2 class=”top-heading”>Main Heading 1</h2>
<h2 class=”top-heading”>Main Heading 2</h2>
<h2 class=”top-heading”>Main Heading 3</h2>
<h2 class=”top-heading”>Main Heading 4</h2>
Box Model
Padding & Margin
Padding:
● padding: 1 6px;
● padding-top, right, bottom, left.
● padding: 1 2px 1 6px 20px 24px
● padding: 1 2px 24px 1 2px 24px; -> padding: 1 2px 24px;

Margin:
● margin: 1 6px;
● margin-top, right, bottom, left.
● margin: 1 2px 1 6px 20px 24px
● margin: 1 2px 24px 1 2px 24px; -> margin: 1 2px 24px;
Adding Hyperlinks
To add links we can use the <a> tag.

Syntax:
<a href=”target-url”>label</a>

For example,
<a href=”https://www.google.com”>Google</a>

Note:
It accepts an attribute called target=”_blank” to open the link in a new window.
The “id” attribute
HTML provides us with an attribute called “id” for uniquely identifying the elements.
The “id” attribute can be used to bookmark sections and add styles to the HTML element.
No two HTML elements in a web page should have the same “id”.

Syntax:
<elem id=”id-name”></elem>

For example:
<img id=”logo” src=”https://im.gur/97djmd.png” alt=”Logo” />
Block vs Inline Elements
Block elements start in a new line and take the entire width of the screen. These elements
have a default display value of block.
For example,
<h1 >, <p>, <ul>, <ol>, <div> and many more.

Inline element don't start on a new line and only take the width required to wrap the content.
These are the elements which have default display value as inline.
For example,
<img />, <span>, <b>, <i>, <a>, <button> and many more.

Full Reference:
https://www.w3schools.com/html/html_blocks.asp
Adding Borders
Border Style: border-style (dotted, dashed, solid, double, none, mixed)
Border Width: border-width
Border Color: border-color

Shorthand Property:
border: 1px solid blue;

Rounded Corners: Border-Radius


Styling Buttons
We can use the general CSS properties like font-size, color, background-color, border etc
to add styles to buttons.
We can also use the hover pseudo-class to add hover effects.
We can change the cursor to pointer.

Cursor: pointer, not-allowed, progress, grab, zoom-in, zoom-out.

Cursor Full Reference: https://www.w3schools.com/cssref/pr_class_cursor.asp


Adding Shadows
We can add shadows to:
- Text : text-shadow
- Box : box-shadow

Syntax:
text-shadow/box-shadow: right-offset bottom-offset spread color;

For example,
text-shadow/box-shadow: 4px 4px 8px #cccccc;
TABLES
DESIGNING LAYOUTS
Problem Statement: Invoice Webpage
You have to create this webpage.

https://i.imgur.com/x2yEYqg.png
HTML5
HTML5: The New Features
● Semantic elements like <header>, <nav>, <main>, <section> etc.
● Added inbuilt support for audio and video files.
● Added inbuilt support for vector graphics like SVG and Canvas.
● Multiple storage options like Application Cache, SQL Database and Web Storage.
● JS Web Worker API which allows JS and browser interface to run on different threads.
Semantic and Structural Elements
Structural elements are used to structure content - these tags tell the browser how to
display the content on the page. They give no indication as to what type of content they
contain.
For example, <div>, <span> etc.

Semantic tags address this shortcoming by indicating clearly what role is played by the
content in those tags. That explicit information helps search engines like Google and Bing
to better understand which content is important, which is subsidiary, which is for navigation.
For example, <header>, <main>, <article> etc.
NEW HTML5
ELEMENTS
FORMS
<fieldset></fieldset>
<legend></legend>
<optgroup></optgroup>
<datalist></datalist>
Multimedia in HTML
<video></video>
<video width="320" height="240" controls autoplay loop
muted=”true”>
<source src="http://techslides.com/demos/sample-videos/small.3gp"
type="video/3gp">
<source src="http://techslides.com/demos/sample-videos/small.mp4"
type="video/mp4">
</video>
<audio></audio>
<audio controls>
<source
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
type="audio/mp3">
</audio>
<iframe></iframe>
Iframe stands for Inline Frame. The ” iframe ” tag defines a rectangular region within the
document in which the browser can display a separate document.

<iframe src="URL" width="800" height="600"></iframe>


Final Project
Please finish this before Monday’s Practice Session.

https://www.edyoda.com/course/1481?episode_id=2236
KEEP LEARNING!!
TOP HEADING
LOTS OF MAIN MAIN CONTENT

LOREM IPSUM DOLOR DOLOR DOLOR LOREM IPSUM DOLOR


HEADING

You might also like