Scribd
Upload
102 views

Complete HTML Notes 1681809769

This document provides notes on HTML document structure, basic tags, text formatting, tables, images, links, lists and forms. It includes the purpose and code examples for common HTML elements like <head>, <body>, <p>, <h1-h6>, <table>, <img>, <a>, <ul>, <ol>, <dl>, <form> and associated input fields. The notes are intended to be a quick and easy reference for remembering important HTML tags and their usage.

Uploaded by

Nageswar Makala
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
102 views

Complete HTML Notes 1681809769

This document provides notes on HTML document structure, basic tags, text formatting, tables, images, links, lists and forms. It includes the purpose and code examples for common HTML elements like <head>, <body>, <p>, <h1-h6>, <table>, <img>, <a>, <ul>, <ol>, <dl>, <form> and associated input fields. The notes are intended to be a quick and easy reference for remembering important HTML tags and their usage.

Uploaded by

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

DEVELOPER UPDATES

HTML IMPORTANT
NOTES
QUICK AND EASY TO REMEMBER NOTES

Sold to
[email protected]
HTML NOTES - HTML DOCUMENT STRUCTURE

HTML Document Structure

DEVELOPER UPDATES 01
HTML NOTES - BASIC HTML PAGE TAGS

Basic HTML Page Tags

Tag Description

<!DOCTYPE html> It is used to tell the browser the type of document.

<html> This tag is container for all other HTML tags.

<head> Tag to define the head portion of the document.

<title> It is used to set title of the document shown on the browser's


tab

<body> <body> contains all content of HTML document that is shown


to the user

<p> <p> is used to define the paragraph

*Note: In HTML every tag must have an end tag, For Example, if you are inserting a
paragraph with <p> it should have an end tag </p>, There are some exception tags that
don't have an end tag like <!DOCTYPE html>, <br>.

DEVELOPER UPDATES 02
HTML NOTES - HTML TEXT FORMATTING

HTML Text Formatting


Tag Description

<h?>Heading<h?> Used to insert headings, h1(Largest) to h6 (Smallest)

<b> To make a text bold

<i> To make a text italic

<strong> Used to show important text, makes a text bold

<em> Used to define emphasised text

<mark> Used to highlight the text

<s> To strikethrough the text

<code> Used to insert the source code in the document

<cite> To insert title of creative work like images, audio, video, etc.

<time> Used to insert the date and time

<address> Used to insert the address

<sub> Defines subscript text

<sup> Defines superscript text

<blockquote> Block Quote an element from another source within a


document

<pre> Defines pre formated text

HTML Text Formatting Example


The below is code demonstrates how to use HTML text formatting tags:

DEVELOPER UPDATES 03
HTML NOTES - HTML TEXT FORMATTING

DEVELOPER UPDATES 04
HTML NOTES - HTML TEXT FORMATTING

Output

HTML Tables Tags

Tag Description

<table> Define a table

<thead> Used to group table header content

<tbody> Container for table content

<th> To insert header cell within row

<tr> To Insert a row within table

<td> To insert a table cell within row

DEVELOPER UPDATES 05
HTML NOTES - HTML TABLE

Table Example

Output:

DEVELOPER UPDATES 06
HTML NOTES - HTML IMAGES

HTML Images
Images make websites beautiful and easy to process information. To add
images to HTML pages <img> tag is used, img tag has the following
important attributes that are needed to format an image.

Image Attributes Description

src Used to specify the path of image file

alt Used to show an alternative name to the image if the image is


not loaded and helpful for Search Engine Optimization.

height Used to specify the height of the image

width Used to specify the width of the image

Output:

DEVELOPER UPDATES 07
HTML NOTES - HTML LINKS

HTML Links
HTML links are a powerful way to allow seamless navigation of pages on
your website. When a user clicks on the link, the browser automatically
follows it and loads the link URL.

To insert the links in the webpage we have to use the <a> tag. Following
are the important attributes that are required to insert the links.

Anchor tag attr Description

href Used to specify the link

target Used to specify where link should be open, Value = _blank,


_parent, _self, _top

download Used to specify the target file if you want to add download file
feature

DEVELOPER UPDATES 08
HTML NOTES - HTML LISTS

HTML Lists
Using HTML it's possible to display information in a list. This makes it easier
to understand the data. HTML provides 3 ways to specify the information.

List Type Description

<ol> To insert ordered list in the web page

<ul> To insert unordered list in the web page

<dl> To insert description list in the web page, It is arranged in key


value pair

In above example <li> is used to insert a list item, <dt> means data
term(key) and <dd> data description(value).

DEVELOPER UPDATES 09
HTML NOTES - HTML LISTS

HTML Lists Output

DEVELOPER UPDATES 10
HTML NOTES - HTML FORM

HTML Forms
Suppose your client or boss told you to design a webpage that takes input
from the user. In that scenario, you will need to add a form to the
webpage.

To add the form to the webpage we have to use the <form> element.
Following are the attributes used for the form tag.

Attributes Description

name This attribute defines name of the form, it should be unique

action Path to backend script, which process the data

method Used to set HTTP method to submit data to the backend,


There are 2 types of HTTP methods: GET and POST

enctype Used to define how browser should encode the data before
sending it to the server, Values for this attributes are:
application/x-www-form-urlencoded: The default value.
multipart/form-data: If form contains input type file then
this tag is used
text/plain: Introduced in HTML5 for debugging.

Form Field Types


Text Fields
Buttons
Checkbox
Radiobox
Select options control
File select
Hidden inputs
Labels

DEVELOPER UPDATES 11
HTML NOTES - HTML FORM

Text Fields
Type Description

text Used to accept single line text data

password Used to accept password

Text Fields Attributes


Attribute Description

type Type of the text field: text or password

name Name of the text field, It should be unique

id Id of the text field, It should be unique

size Width of the text fields in terms of characters

Multi-Line Text Field


Element Description

<textarea> Used to define multiple line text field to accept the data like
user address and description of the product

Multi-Line Text Field Attributes


Attribute Description

name Used to set name of the field

id Used to set the id of the field

rows Used to set number of rows for text area input

cols Used to set number of columns for text area input

DEVELOPER UPDATES 12
HTML NOTES - HTML FORM

Form Text Field Example

Output:

DEVELOPER UPDATES 13
HTML NOTES - HTML FORM

Buttons
If you want to add buttons in the form like Submit, Save, Update and
Cancel, You will need to use <button> tag to add the button in the form.

Button Attributes
Attribute Description

type Type of the button, Value for this attribute will be button

name To define the name of the button

id To define the id of the button

onClick Javascript function to be called when user clicks on the


button

Checkbox
If you want to add feature of the selecting the multiple options like your
favourite subjects, your favourite food, place would you like to travel then
checkbox field is used in the form. For grouping checkbox there should be
same name for all checkbox.

Checkbox Attributes
Attribute Description

type Used to set type of the input, its value will be checkbox

name To define the name of the checkbox

id To define the id of the checkbox

onChange Javascript function to be called when user checks or uncheck


the checkbox

value To set the value of the checkbox, Like if you are adding field to
choose your favourite food the value will be food name

checked To set if checkbox is checked or not, If you add this attribute


in the element checkbox will be selected by default

DEVELOPER UPDATES 14
HTML NOTES - HTML FORM

Radio Button
If you want to give the option to select only one field from the multiple
options available to the user then the radio button is used.

For example, there will be multiple genders but we allow users to select
only one gender. For grouping radio buttons there should be same name
for all checkbox.
Radio Button Attributes
Attribute Description

type Used to set type of the input, its value will be radio

name To define the name of the radio button

id To define the id of the radio button

onChange Javascript function to be called when user checks or uncheck


the radio button

value To set the value of the radio button

checked To set if the radio button is checked or not, If you add this
attribute in the element radio button will be selected by
default

Select Option Control


If you have a long list of options and you have to allow select only one
option then there you will use select input type instead of showing a lot of
radio buttons.

For example, suppose you want to add a list of the cities to select user city,
then you will choose select form control instead of radio buttons.

DEVELOPER UPDATES 15
HTML NOTES - HTML FORM

File Input
If you want to add file upload feature then file input is used, For example
suppose you have to add the feature of setting profile pic of the user then you
will have to use file input type.

While adding file input control, never forget to set encytype =


"multipart/form-data" attribute in the form element.

Hidden Inputs
If you want to add/set the value in the form that can be used later or can be
sent to the server without showing it to the user at that time hidden fields are
used.

For example, You will need a user id for front-end operation but you don't
have to show the user id to the user then you will have to use a hidden input
field.

Form Labels
In the above form example, we set the input field name in plain text format,
like name, and password, But there is a better option to set a label for the
input field in the form.

We can use <label> to set a label for the input field, So when users click on the
label the form field automatically gets selected. and we can format that label
text. For this feature we will have to set "for" attribute in the label and it
should match with input field id.

DEVELOPER UPDATES 16
HTML NOTES - HTML FORM

Form Fields Example

DEVELOPER UPDATES 17
HTML NOTES - HTML5 NEW INPUT ELEMENTS

HTML5 New Input Elements


In the updated version of HTML5, they introduced new tags that are very
useful for web developers and make web developers work easy. Below are the
new input type attributes:

Input Attribute Description

date To allow user to select date from drop-down calendar

DateTime To allow user to select date and time at same time

time To allow user to select the time

email Used to add email field

tel Used to add phone number field

color Used to add color picker to select color

number Used to add number field that accepts integer and number

range Used to add range slider

url Used to set


addtype
URLof
field
the input, its value will be radio

DEVELOPER UPDATES 18
HTML NOTES - HTML5 NEW INPUT ELEMENTS

Output

Comment in HTML
To comment the code in html the following syntax is used.

DEVELOPER UPDATES 19
HTML NOTES - HTML LAYOUT

HTML Layout
In the above examples, we created HTML pages without structuring pages
well. To make a good website experience for the user HTML provides elements
to design an HTML layout to make a website look awesome.

In the very first we have seen the structure of the HTML webpage, Here we will
go through all tags with example

Tag Description

<div> This is most used tag for designing HTML pages, This is
container for HTML elements. Using div we can divide the
HTML pages into different blocks and add style to each div.

<section> This tag allows us to divide page in sections

<p> This tag allows us to define paragraph

<header> This tag allows us to add header in the webpage

<footer> This tag allows us to add footer in the webpage

<aside> The HTML aside tag identifies content that is not essential to
the page and should be displayed in a separate box or beside
the main content.

<hr> This tag is used to add horizontal line between two elements

<br> This tag is used to add line break

DEVELOPER UPDATES 20
HTML NOTES - HTML LAYOUT EXAMPLE

HTML Layout Example

DEVELOPER UPDATES 21
HTML NOTES - VIDEO IN HTML PAGE

Video in HTML Page


If you want to add video in HTML page, we can do this using <video> tag, Let's
see an example of adding video in the webpage.

The control attributes add video controls like play, pause, and volume. width
and height are used to define video width and height. source allows us to
specify video files we can add alternative files using this tag.

To add the autoplay feature, add the "autoplay" attribute in the audio tag.

DEVELOPER UPDATES 22
HTML NOTES - AUDIO IN HTML PAGE

Audio in HTML Page


If you want to add audio in HTML page, we can do this using <audio> tag, Let's
see an example of adding audio in the webpage.

The control attributes add audio controls like play, pause, and volume. source
allows us to specify audio files we can add alternative files using this tag.

To add the autoplay feature, add the "autoplay" attribute in the audio tag.

DEVELOPER UPDATES 23
HTML NOTES - ADDING CSS TO HTML

Adding CSS to HTML


The Cascading Style Sheets (CSS) is a code that is used to format the layout of
your website or web page. It can be used in conjunction with HTML to style
your website.

CSS helps you make changes to the appearance of elements within a web
page such as the text, fonts, colors, images, and spacing. You can also create
and add custom fonts.

There are 3 ways given below to add CSS to the HTML page:

Way Description

External To add external CSS file using <link> tag

Internal To add CSS in HTML page in the head section using <style> tag

Inline To add css inside HTML tag using style attribute

DEVELOPER UPDATES 24
HTML NOTES - ADDING CSS TO HTML

Adding JavaScript to HTML


JavaScript is a language that is widely used for creating interactive web pages.
You can add attractive and dynamic elements such as menus, popup
windows, photo galleries, and delivery charges to your site using JavaScript
programming.

JavaScript is executed in the user's web browser so developers use JavaScript


as much possible as they can to make the user experience better.

DEVELOPER UPDATES 25
Thank You!

Follow our channels on Instagram to get daily updates and learn


something new:

@richwebdeveloper
@new_javascript
@developerupdates

www.developerupdates.com @developerupdates

You might also like