HTML
Uploaded by
megatronledHTML
Uploaded by
megatronledFundamentals of Web Technology
------------------------------
What is a Network?
------------------
A Network is a group of Interconnected (Linked Together) devices, such as computers, Servers,
Routers, and other hardware (Switches, IOT Devices like Smart Camera, Smart Lights, Smart
fans), that communicate and share resources.
A network can exist locally (within a small area like home, office, or school). global : hdfc bank
Internet (global)
Intranet (private: home, office, schools, banking, hospitals)
What is the Internet ?
----------------------------
The internet is a global network that connects millions of computers and devices, allowing
people to share information, communicate, and access like websites, emails, videos, .....
What is a Web Browser?
--------------------
A web browser is a software application that allows users to access and view websites on the
internet.
It retrieves webpages from servers and displays them on devices like computers or
smartphones (browsers)
Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, and Opera
Webpage
-------
A webpage is a single document or file that contains text, images, videos, and so on.
Website
-------
Collection of webpages
HTTP(Hyper Text Transfer Protocol)
[Link]
email : sdfsdf@[Link]
password: sivasoft -->hackers(sivasoft) --> server (databases)
10 Lakhs --> transparent bag --> going to your home
HTTPS ([Link] :
HTTPS(Hypertext Transfer Protocol Secure)
email: sdfsdf@[Link]
password: sivasoft -->hackers(dsfsdf345sdkldjgkjd3456dglkdjfgkl) --> server (databases)
Web Development
---------------
It is the process of creating, building, and maintaining websites that run on the internet.
It involves designing, coding, and deploying websites that users can access using a web
browser
creating: Idea Phase (UI / UX)
building: Coding and Developing (front end or client side or ui: react or angular, backend:
python, nodejs, java, .net)
maintaining websites :
HTML
--------
[Link] stands for Hyper Text Markup Language
2. Tag
--------
Text placed in between the left angle brace '<' and right angle brace '>' is called a tag.
Syntax(set of rules)
--------------------
Start(Open) tag Close(end) tag
------------------------------------------------------
<table>-----------------------------------</table>
<body>------------------------------------</body>
NOTE: Closing tag will be represented with Forward Slash(/)
3. Hyper Text = Hyperlink = Navigation (Moving from one page to another page)
[Link] = It means using tags(<table>, <img>, <a>,....) to define the structure of a document.
[Link] = HTML follows a set of rules(syntax) that browsers understand
[Link] Web Browsers began development in the late 1980s and early 1990s by Tim Berner's
Lee while working at CERN(Conseil Européen pour la Recherche Nucléaire, which is French for
the European Organization for Nuclear Research).
7. In 1990, Tim Berner's Lee created the first web browser (World Wide Web, later renamed
Nexus).
[Link] 1.0 Initial Version: 1991 (Basic Structure, Hyperlinks, Text formatting)
[Link] 2.0: 1995 (Forms, Tables, Images)
[Link] 3.2: 1997 (CSS Support, JavaScript, Improved Tables and Forms)
[Link] 4.01: 1999 (Scripting Improvements, Multimedia Support, Accessibility Features)
12. XHTML: 2000 (Stricter rules, Better Structure)
13.HTML5: 2014 (Semantic Elements, Multimedia, APIs (Drag and Drop, localStorage,
sessionStorage, Web Workers.....))
Semantic Elements: Elements that have some meaning
ex : <header></header>, <footer></footer>, <nav></nav>,.........
14. The W3C(World Wide Web Consortium) is an international Organization that creates rules
and guidelines for Web Development. Tim Berner's founded W3C in 1994.
15. Purpose of W3C: HTML should work the same on all devices and browsers.
NOTE: Before W3C, Different Web Browsers (Like Internet Explorer and Netscape) displayed
websites differently, causing many problems. Tim Berners-Lee created W3C to set Web
standards so that all websites work the same way everywhere(available browsers).
Main Goals of W3C
-----------------
1. Standardization --> Ensures all Web Technologies (HTML, CSS, JAVASCRIPT) work the
same in every browser.
[Link] --> Helps people with disabilities access websites easily.
[Link] & Privacy --> Protects users data and online information.
[Link] --> Ensures Websites work on mobile, desktop , all devices.
[Link] save it with .html(w3c) or .htm extension.
[Link] is a case insensitive language.
ex : <HTML> = <hTMl> = <html> (W3C - lowercase)
[Link] is a global language i.e, it can be understood by all the available browsers.
[Link]
--------
[Link]: Notepad, Notepad++, Editplus, Sublime Text, Netbeans, Visual Studio (VS) Code......
[Link]: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari and Opera.
[Link] of Tags
----------------
[Link] or Paired tag : Tags which consists both opening and closing
------------------------------------------------------------------------
ex : <html></html>, <p></p>, <a></a>,.....
[Link] or Unpaired tag : Tag which consists only opening
ex : <br>, <hr>, <img>.....
NOTE
----
HTML, Angular : <br>, <hr>, <img>
XHTML, React : <br/>, <hr/>, <img/> - Self-Closed Tags
Structure of html
-----------------
title : relevant, 60 characters including spaces(count)
26 : A,B,C....Z
tim berner's lee : h1,h2,...h6
Formatting tags
--------------------
b
strong
Semantic elements : Elements which have some meaning
Deprecated tags (W3C - removed tags)
------------------------------------
center
font
basefont
s
strike
u
applet
isindex
acronym
frame
frameset
noframes
embed
marquee
big
dir
spacer
tt
Deprecated Attributes
---------------------
align - caption, iframe, img, input, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, td, th, and tr.
hspace - img
vspace - img
width - hr, table, td, th, pre, img.
height - table, td, th, pre, img.
background - body
bgcolor - table, tr, td, th and body.
rules - table
border - table, img
cellpadding - table
cellspacing - table
type - li, ol and ul
noshade - hr
char
charoff
color, face - font
marginwidth, marginheight - iframe, body
nowrap - td,th
size - font,hr
start - ol
valign - td, th, tr
New Line --> Block elements --> ex : h1-h6, p, li,.....
Same Line --> Inline elements --> ex : em, strong, ins, mark.....
Tag: Text placed in between left angle brace '<' and right angle brace '>'
ex : <strong> - open(start) tag
</strong> - close(end) tag
Element : An HTML element is defined by a start tag, some content, and an end tag.
syntax : <tagname>some content</tagname>
<strong>Siva Soft</strong>
<p> : tag
<ul><li></li></ul> : element
<li>List Item</li> : li element
Empty HTML elements : <br>, <img>, <hr>
HTML elements with no content are called empty elements.
Attributes and Parameters
-------------------------
[Link] usually come in key or name / value pairs
[Link] are the special features of a tag or Attributes provide additional information about
elements.
3.A tag can have one or more attributes.
[Link] are the values(Varies or Changes) that we assign(Store or Hold) to an attribute.
HTML : Attribute
CSS : Property
JS : Key or name
Syntax
------
<tag attribute="parameter">
ex
---
Tag Attribute Parameter
-----------------------
<p align="center">
<font color="red" size="7" face="verdana">
align(key or name or attribute) - fixed, Value or Parameter(center, right, left, justify) - varies
align="center"
align="right"
align="left"
align="justify"
x=10 (10 value assigned(store or hold) to x)
x=20 (20 value assigned(store or hold) to x)
x="Siva" (Siva value assigned(store or hold) to x)
Dhoni - Cricket
Siva - Training, Developer, director
Types of Lists
--------------
[Link] List
[Link] List
[Link] List
[Link] List
Zoom In : Ctrl + plus(500% : Browser and Notepad)
Zoom Out : Ctrl + minus(25%(Browser), 10(Notepad))
Original or Default : Ctrl + 0(100%: Browser and Notepad)
Quotation and citation elements
<blockquote>
<abbr>
<address>
<bdo>
Comments
// - single
/**/ - multi-line
Colors
------
Color Mode
----------
R (Red: 0-255 = 1-256)
G (Green: 0-255 = 1-256)
B (Blue: 0-255 = 1-256)
256 * 256 * 256 = 1,67,77,216 = 16.7M = 16M
Hexa-Decimal Codes
------------------
#9c1a1a
# - id(unique)
9c - red
1a - green
1a - blue
Red
---
Color Range(R) Hexa Decimal
-----------------------------------------------------
0 00
1 01
2 02
. .
. .
9 09
10 0a
11 0b
. .
. .
15 0f
16 10
17 11
. .
. .
25 19
26 1a
27 1b
. .
. .
31 1f
. .
. .
255 ff
CMYK - Cyan (blue) Magenta (pink) Yellow K(Krypton-black) - color printer
table
1px
Unit
----
Distance : cm, m, km,.....
Milk : 1lt
Images, Videos, Screen Sizes: px, em, %
px
1366px * 768px
1920px * 1080px : Full HD
2560 * 1440px : 2K
3840 x 2160 : 4K
Smartphones
-----------
50MP, 64MP, 108MP, 200MP - clarity, file size will be more
Table tag (css)
---------
colgroup
col
rowspan and colspan
iframe tag
----------
Iframe tag is used to add or embed external sources like google map, youtube, website, html,
images......
NOTE
----
It is a good practice to always include a title attribute for the <iframe>. This used by screen
readers to react out what the content of the frame is.
anchor tag with iframe tag
Absolute URls (Uniform Resource Locator) vs Relative URLs
---------------------------------------------------------
Absolute URL (a full web address)
Relative URLs or Local Link (without the [Link]
To: sivasoft@[Link];sdfdsf@[Link]
CC : Carbon Copy
BCC : Blind Carbon Copy
To
--
This is for main recipients.
manager@[Link]
CC - Carbon Copy
----------------
used to inform others (team mates)
BCC
---
inform to my hr(hr@[Link])
HTML Entities
-------------
Entity names look like : &entity_name; ex : <
Entity numbers look like : &#entity)number; ex : <
NOTE: Entity names are easier to remember than entity numbers
[Link]
⌛
⌚ ⌚
⏰
⌛ ⌛
☔
⏰ ⏰
☕
☔ ☔
♿
☕ ☕
⚓
♿ ♿
⚡
⚓ ⚓
⚡ ⚡
⛱
⛳
⛱ ⛱
⛵
⛳ ⛳
⛽
⛵ ⛵
⛽ ⛽
✅
✂ ✂ ✂
✅ ✅
✈ ✈ ✈
✋
✉ ✉ ✉
✋ ✋
✔ ✔ ✔
✨
✖ ✖ ✖
✨ ✨
✳ ✳ ✳
✴ ✴ ✴
❄ ❄ ❄
❌
❇ ❇ ❇
❎
❌ ❌
❓
❎ ❎
❔
❓ ❓
❕
❔ ❔
❗
❕ ❕
❗ ❗
➕
❤ ❤ ❤
➖
➕ ➕
➗
➖ ➖
➗ ➗
🆗
🌙
🆗 🆗
🌛
🌙 🌙
🌜
🌛 🌛
🌝
🌜 🌜
🌞
🌝 🌝
🌟
🌞 🌞
🌡
🌟 🌟
🌤
🌡 🌡
🌥
🌤 🌤
🌦
🌥 🌥
🌧
🌦 🌦
🌨
🌧 🌧
🌩
🌨 🌨
🌪
🌩 🌩
🌲
🌪 🌪
🌳
🌲 🌲
🌴
🌳 🌳
🌵
🌴 🌴
🌶
🌵 🌵
🌷
🌶 🌶
🌸
🌷 🌷
🌹
🌸 🌸
🌺
🌹 🌹
🌻
🌺 🌺
🌼
🌻 🌻
🌽
🌼 🌼
🌾
🌽 🌽
🌿
🌾 🌾
🍀
🌿 🌿
🍁
🍀 🍀
🍂
🍁 🍁
🍃
🍂 🍂
🍄
🍃 🍃
🍅
🍄 🍄
🍆
🍅 🍅
🍇
🍆 🍆
🍈
🍇 🍇
🍉
🍈 🍈
🍊
🍉 🍉
🍋
🍊 🍊
🍌
🍋 🍋
🍍
🍌 🍌
🍎
🍍 🍍
🍎 🍎
🍏
🍐
🍏 🍏
🍑
🍐 🍐
🍒
🍑 🍑
🍓
🍒 🍒
🍴
🍓 🍓
🍵
🍴 🍴
🍷
🍵 🍵
🍸
🍷 🍷
🍽
🍸 🍸
🎁
🍽 🍽
🎂
🎁 🎁
🎃
🎂 🎂
🎄
🎃 🎃
🎗
🎄 🎄
🎧
🎗 🎗
🎨
🎧 🎧
🎵
🎨 🎨
🎶
🎵 🎵
🎷
🎶 🎶
🎸
🎷 🎷
🎺
🎸 🎸
🎻
🎺 🎺
🎼
🎻 🎻
🎽
🎼 🎼
🎾
🎽 🎽
🏁
🎾 🎾
🏂
🏁 🏁
🏃
🏂 🏂
🏄
🏃 🏃
🏅
🏄 🏄
🏆
🏅 🏅
🏇
🏆 🏆
🏉
🏇 🏇
🏊
🏉 🏉
🏋
🏊 🏊
🏌
🏋 🏋
🏍
🏌 🏌
🏎
🏍 🏍
🏏
🏎 🏎
🏐
🏏 🏏
🏑
🏐 🏐
🏒
🏑 🏑
🏓
🏒 🏒
🏓 🏓
🏠
🏴
🏠 🏠
🐁
🏴 🏴
🐂
🐁 🐁
🐃
🐂 🐂
🐄
🐃 🐃
🐆
🐄 🐄
🐇
🐆 🐆
🐈
🐇 🐇
🐉
🐈 🐈
🐊
🐉 🐉
🐋
🐊 🐊
🐌
🐋 🐋
🐍
🐌 🐌
🐎
🐍 🐍
🐏
🐎 🐎
🐐
🐏 🐏
🐒
🐐 🐐
🐓
🐒 🐒
🐔
🐓 🐓
🐕
🐔 🐔
🐖
🐕 🐕
🐗
🐖 🐖
🐘
🐗 🐗
🐙
🐘 🐘
🐚
🐙 🐙
🐛
🐚 🐚
🐜
🐛 🐛
🐝
🐜 🐜
🐞
🐝 🐝
🐟
🐞 🐞
🐢
🐟 🐟
🐤
🐢 🐢
🐦
🐤 🐤
🐪
🐦 🐦
🐫
🐪 🐪
🐬
🐫 🐫
🐭
🐬 🐬
🐮
🐭 🐭
🐯
🐮 🐮
🐰
🐯 🐯
🐱
🐰 🐰
🐲
🐱 🐱
🐳
🐲 🐲
🐳 🐳
🐴
🐵
🐴 🐴
🐶
🐵 🐵
🐷
🐶 🐶
🐸
🐷 🐷
🐹
🐸 🐸
🐺
🐹 🐹
🐻
🐺 🐺
🐼
🐻 🐻
🐽
🐼 🐼
👀
🐽 🐽
👂
👀 👀
👆
👂 👂
👇
👆 👆
👈
👇 👇
👉
👈 👈
👊
👉 👉
👋
👊 👊
👌
👋 👋
👍
👌 👌
👎
👍 👍
👏
👎 👎
👐
👏 👏
👑
👐 👐
👒
👑 👑
👓
👒 👒
👔
👓 👓
👕
👔 👔
👖
👕 👕
👗
👖 👖
👘
👗 👗
👙
👘 👘
👚
👙 👙
👛
👚 👚
👜
👛 👛
👝
👜 👜
👞
👝 👝
👟
👞 👞
👠
👟 👟
👡
👠 👠
👢
👡 👡
👣
👢 👢
👤
👣 👣
👥
👤 👤
👥 👥
👦
👧
👦 👦
👨
👧 👧
👩
👨 👨
👪
👩 👩
👫
👪 👪
👬
👫 👫
👭
👬 👬
👮
👭 👭
👰
👮 👮
👱
👰 👰
👲
👱 👱
👳
👲 👲
👴
👳 👳
👵
👴 👴
👶
👵 👵
👷
👶 👶
👸
👷 👷
👹
👸 👸
👻
👹 👹
👽
👻 👻
👾
👽 👽
👿
👾 👾
💀
👿 👿
💉
💀 💀
💊
💉 💉
💌
💊 💊
💎
💌 💌
💑
💎 💎
💓
💑 💑
💔
💓 💓
💕
💔 💔
💖
💕 💕
💗
💖 💖
💘
💗 💗
💙
💘 💘
💚
💙 💙
💛
💚 💚
💜
💛 💛
💝
💜 💜
💞
💝 💝
💟
💞 💞
💤
💟 💟
💥
💤 💤
💥 💥
💩
💪
💩 💩
💬
💪 💪
💭
💬 💬
💮
💭 💭
💯
💮 💮
💰
💯 💯
💲
💰 💰
💳
💲 💲
💼
💳 💳
💽
💼 💼
💾
💽 💽
📂
💾 💾
📄
📂 📂
📅
📄 📄
📈
📅 📅
📉
📈 📈
📊
📉 📉
📋
📊 📊
📌
📋 📋
📍
📌 📌
📎
📍 📍
📏
📎 📎
📐
📏 📏
📜
📐 📐
📝
📜 📜
📞
📝 📝
📡
📞 📞
📢
📡 📡
📣
📢 📢
📵
📣 📣
📶
📵 📵
📷
📶 📶
📹
📷 📷
📺
📹 📹
📻
📺 📺
🔅
📻 📻
🔆
🔅 🔅
🔇
🔆 🔆
🔈
🔇 🔇
🔉
🔈 🔈
🔊
🔉 🔉
🔋
🔊 🔊
🔌
🔋 🔋
🔌 🔌
🔍
🔎
🔍 🔍
🔐
🔎 🔎
🔑
🔐 🔐
🔒
🔑 🔑
🔓
🔒 🔒
🔔
🔓 🔓
🔕
🔔 🔔
🔗
🔕 🔕
🔘
🔗 🔗
🔞
🔘 🔘
🔥
🔞 🔞
🔦
🔥 🔥
🔧
🔦 🔦
🔨
🔧 🔧
🔪
🔨 🔨
🔫
🔪 🔪
🔬
🔫 🔫
🔭
🔬 🔬
🔯
🔭 🔭
🔺
🔯 🔯
🔻
🔺 🔺
🔼
🔻 🔻
🔽
🔼 🔼
🕶
🔽 🔽
🕷
🕶 🕶
🕸
🕷 🕷
🖊
🕸 🕸
🖤
🖊 🖊
🖱
🖤 🖤
🗣
🖱 🖱
🗨
🗣 🗣
🗯
🗨 🗨
🗳
🗯 🗯
🗼
🗳 🗳
🗽
🗼 🗼
😀
🗽 🗽
😁
😀 😀
😂
😁 😁
😃
😂 😂
😄
😃 😃
😅
😄 😄
😆
😅 😅
😇
😆 😆
😇 😇
😈
😉
😈 😈
😊
😉 😉
😋
😊 😊
😌
😋 😋
😍
😌 😌
😎
😍 😍
😏
😎 😎
😐
😏 😏
😑
😐 😐
😒
😑 😑
😓
😒 😒
😔
😓 😓
😕
😔 😔
😖
😕 😕
😗
😖 😖
😘
😗 😗
😙
😘 😘
😚
😙 😙
😛
😚 😚
😜
😛 😛
😝
😜 😜
😞
😝 😝
😟
😞 😞
😠
😟 😟
😡
😠 😠
😢
😡 😡
😣
😢 😢
😤
😣 😣
😥
😤 😤
😦
😥 😥
😧
😦 😦
😨
😧 😧
😩
😨 😨
😪
😩 😩
😫
😪 😪
😬
😫 😫
😭
😬 😬
😮
😭 😭
😯
😮 😮
😰
😯 😯
😱
😰 😰
😲
😱 😱
😳
😲 😲
😳 😳
😴
😵
😴 😴
😶
😵 😵
😷
😶 😶
😸
😷 😷
😹
😸 😸
😺
😹 😹
😻
😺 😺
😼
😻 😻
😽
😼 😼
😾
😽 😽
😿
😾 😾
🙀
😿 😿
🙁
🙀 🙀
🙂
🙁 🙁
🙃
🙂 🙂
🙄
🙃 🙃
🙅
🙄 🙄
🙆
🙅 🙅
🙇
🙆 🙆
🙈
🙇 🙇
🙉
🙈 🙈
🙊
🙉 🙉
🙋
🙊 🙊
🙌
🙋 🙋
🙍
🙌 🙌
🙎
🙍 🙍
🙏
🙎 🙎
🚀
🙏 🙏
🚁
🚀 🚀
🚂
🚁 🚁
🚃
🚂 🚂
🚄
🚃 🚃
🚅
🚄 🚄
🚆
🚅 🚅
🚇
🚆 🚆
🚈
🚇 🚇
🚉
🚈 🚈
🚊
🚉 🚉
🚋
🚊 🚊
🚌
🚋 🚋
🚍
🚌 🚌
🚎
🚍 🚍
🚐
🚎 🚎
🚐 🚐
🚑
🚒
🚑 🚑
🚓
🚒 🚒
🚔
🚓 🚓
🚕
🚔 🚔
🚖
🚕 🚕
🚗
🚖 🚖
🚘
🚗 🚗
🚙
🚘 🚘
🚚
🚙 🚙
🚛
🚚 🚚
🚩
🚛 🚛
🚪
🚩 🚩
🚫
🚪 🚪
🚬
🚫 🚫
🚭
🚬 🚬
🚮
🚭 🚭
🚯
🚮 🚮
🚰
🚯 🚯
🚱
🚰 🚰
🚲
🚱 🚱
🚳
🚲 🚲
🚴
🚳 🚳
🚵
🚴 🚴
🚶
🚵 🚵
🚷
🚶 🚶
🚸
🚷 🚷
🚹
🚸 🚸
🚺
🚹 🚹
🚽
🚺 🚺
🚿
🚽 🚽
🛁
🚿 🚿
🛌
🛁 🛁
🛒
🛌 🛌
🛠
🛒 🛒
🤐
🛠 🛠
🤑
🤐 🤐
🤒
🤑 🤑
🤓
🤒 🤒
🤔
🤓 🤓
🤕
🤔 🤔
🤖
🤕 🤕
🤗
🤖 🤖
🤘
🤗 🤗
🤘 🤘
🤙
🤚
🤙 🤙
🤟
🤚 🤚
🤠
🤟 🤟
🤡
🤠 🤠
🤢
🤡 🤡
🤣
🤢 🤢
🤤
🤣 🤣
🤥
🤤 🤤
🤦
🤥 🤥
🤧
🤦 🤦
🤨
🤧 🤧
🤩
🤨 🤨
🤪
🤩 🤩
🤫
🤪 🤪
🤬
🤫 🤫
🤭
🤬 🤬
🤮
🤭 🤭
🤯
🤮 🤮
🤰
🤯 🤯
🤱
🤰 🤰
🤲
🤱 🤱
🤴
🤲 🤲
🤵
🤴 🤴
🤶
🤵 🤵
🥇
🤶 🤶
🥈
🥇 🥇
🥉
🥈 🥈
🥎
🥉 🥉
🥕
🥎 🥎
🥣
🥕 🥕
🧐
🥣 🥣
🧑
🧐 🧐
🧒
🧑 🧑
🧓
🧒 🧒
🧔
🧓 🧓
🧕
🧔 🧔
🧖
🧕 🧕
🧘
🧖 🧖
🧙
🧘 🧘
🧚
🧙 🧙
🧛
🧚 🧚
🧝
🧛 🧛
🧞
🧝 🧝
🧞 🧞
🧟
🧡
🧟 🧟
🧡 🧡
Computer Code Tags
----------------------------
[Link] : defines a piece of computer code (html tags, js.....)
[Link] : defines keyboard input
[Link] : defines sample output from a computer program
[Link] : defines a variable in programming or in a mathematical expression (italic).
[Link] : defines preformatted text (however we type on the editor(notepad, vscode) like spaces
and linebreaks)
NOTE: default font is times new roman but in case of code, kbd, samp and pre monospace
div and span tags : css
HTML Style Guide - XHTML
----------------
Guidelines and Tips for creating good HTML code.
NOTE: Consistent, clean, and tidy HTML code makes it easier for others to read and
understand our code.
[Link] Declare Document Type
------------------------------
<!DOCTYPE html> (html5)
<html>
[Link] Lowercase element names
-----------------------------
<body>
<p>------------</p>
</body>
[Link] all HTML Elements
-------------------------
<p>This is a paragraph</p>
[Link] Lowercase Attribute and Parameter names
---------------------------------------------
<p align="center">This is a paragraph</p>
[Link] Quote Attribute values
---------------------------------------------
<p align="center">This is a paragraph</p>
<p align='center'>This is a paragraph</p>
[Link] Specify alt, width, and height for images
--------------------------------------------------
<img src="images/[Link]" alt="Siva Soft Logo" style="width:128px;height:128px;">
[Link] and Equal Signs
------------------------
<p align="center" >This is a paragraph</p>
<img src="images/[Link]" alt="Siva Soft Logo" style="width:128px;height:128px;">
[Link] Long Code Lines
-----------------------
When using a HTML editor, it is NOT convenient to scroll right and left to read the HTML code.
Try to avoid
[Link] Lines and Indentation
---------------------------------------
[Link] Skip the <html>, <body> and <title> element
----------------------------------------------------
[Link] Empty HTML Elements? (optional)
-----------------------------------------
XHTML, React: <br/>, <hr/>
HTML, Angular: <br>, <hr>
[Link] the lang Attribute
-------------------------
<html lang="en-us">
13. Setting the Viewport (Bootstrap - responsive website - screen sizes like smartphones, Tabs,
Laptop / Desktops)
[Link] Comments
[Link] Stylesheets and Scripts (type attribute is deprecated)
---------------------------------------------------------------
<link rel="stylesheet" href="css/[Link]">
<script></script>
<style></style>
[Link] Lower Case File Names
----------------------------
Servers (Apache, Unix) : [Link] cannot be accessed as [Link]
Servers (IISS) : [Link] can be accessed as [Link]
[Link] extension : .html or .htm
[Link]
------------
[Link], [Link], [Link] (Landing or home is [Link])
[Link] starting with number but can include numbers
[Link] using _ and spaces in file names
siva soft training = sivasofttraining
siva_soft_training = sivasofttraining
siva-soft-training = siva soft training
What is HTML Encoding (Character Sets)?
--------------------------------------------------------
When we create a webpage using HTML, we add text, symbols, and special characters.
To make sure the browser shows all this text correctly, we must tell the browser which character
set(encoding) to use.
Think of a character set like a language dictionary for the browser. It helps the browser know
how to read and display each letter or symbol
What is a Charset?
--------------------------
charset is short for "character set"
In HTML, we use <meta> tag to tell the browser which character set to use.
<meta charset="UTF-8"> (W3C)
Why use UTF-8?
----------------------
UTF-8 stands for Unicode Transformation Format - 8 bit
It is the most recommended character set in HTML5
It supports almost all languages and symbols in the world!
That's why modern websites use UTF-8
Examples : English, Hindi, Chinese, Arabic, Emojis, Symbols @ $ %
UTF-8 is a variable-length encoding(encoding is the process of converting human-readable data
(like text or images)) system, meaning each character is stored using 1 to 4 bytes, depending
on the character. Here’s how it works:
- Basic ASCII characters (A-Z, a-z, 0-9, punctuation) use 1 byte (8 bits).
- Extended Latin characters (like é, ü) use 2 bytes.
- Most common Unicode characters (like Chinese, Hindi, Arabic symbols) use 3
bytes.
- Rare symbols & emojis use 4 bytes.
ASCII Character set
-------------------
Before UTF-8, the internet used something called ASCII (American Standard Code for
Information Interchange)
ASCII is a very basic character set.
It only includes 128 characters (0-127)
it supports
-----------
English Letters (A-Z, a-z)
Numbers (0-9)
Some special characters : !, $, @, <, >
NOTE: So ASCII is only good for simple English content
Other character sets (Older)
----------------------------
windows-1252
------------
Used in old Windows Systems
Supports Western European Languages
iso-8859-1
----------
similar to windows-1252
Also used for Western Europe
These are older encodings. Today we mostly use UTF-8
UTF-16 : Applications (other than browsers)
[Link] - best website to show with and without meta charset
<!DOCTYPE html>
<html>
<head>
<title>Encoding Test</title>
<meta charset="UTF-8">
</head>
<body>
😀
<h1>Encoding Example</h1>
<p>This is a test: ©, €, , नमस्ते, こんにちは</p>
ers (e.g., ™, ₹, or even Arabic or Chinese scripts) to showcase the versatility of UTF-8.
</body>
</html>
meta
------
[Link] (Character Encoding)
------------------------------
<meta charset="UTF-8">
[Link]
-------------
<meta name="description" content="A brief description of the webpage content.140-160
characters">
[Link]
----------
<meta name="keywords" content="python, training, in, course, india, Ameerpet, Hyderabad, full
stack, online">
30 - 40 unique keywords
online python training in Ameerpet
Traffic = More Vistors
[Link]
--------
<meta name="author" content="sivasoft">
[Link] (Responsive Websites)
--------------------------------
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
[Link](Page Auto-Refresh)
----------------------------
<meta http-equiv="refresh" content="30">
[Link]
--------
<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow">
index - Allow the page to be indexed by search engines
follow - Allow links on the page to be followed by search engines
noindex - Prevents the page from being indexed
nofollow - Prevents search engines from following the links.
Crawl:
Search engines use automated programs called "crawlers" (or spiders/bots) to "crawl" the
internet.
This means they systematically visit websites, read their content, and follow links to discover
new or updated pages to potentially add to their index.
<meta name="robots" content="index, follow">
This tag tells search engines: "You can add this webpage to your search results (index it)."
It also says: "Feel free to crawl and follow any links on this page to find other content."
<meta name="robots" content="noindex, nofollow">
This tag instructs search engines: "Do not include this webpage in your search results (don't
index it)."
It further directs: "Also, do not crawl or follow any of the links found on this page."
NOTE:
-----
"Follow any links on this page" means search engine crawlers are permitted to navigate to other
web pages by clicking on the hyperlinks found on the current page.
This allows them to discover and index additional content across the internet.
Forms
-----
An HTML form is section on a webpage that allows users to enter data (like name, email,
password, select........) and submit it to a server page(php, java .net,....)
GET
---
html10112603/[Link]?firstname=Siva&lastname=Soft&password=123@asdsA
firstname,lastname,password - Key or Name (fixed)
Siva, Soft, 123@asdsA - Value (varies or changes)
[Link] the form data to URL, in name or key / value pairs
[Link] use GET to send sensitive data!(password, credit, debit...) - the submitted form data is
visible in the URL!
[Link] length of a URL is limited(2048 characters)
[Link] for form submissions where a user wants to bookmark the result
[Link] is good for non-secure data, like query strings in google.
POST
----
[Link] the form data (the submitted form data is not show in in the URL)
[Link] has no size limitations, and can be used to send large amounts of data.
[Link] submissions with POST cannot be bookmarked
[Link] use POST if the form data contains sensitive or personal information.
button
checkbox
BLOB
HTML5
-----
Forms
email
url
tel
number
range
date
time
datetime
datetime-local
month
week
color
Form Elements
-------------
datalist
output
progress
meter
fieldset
New Attributes for <form>
-------------------------
autocomplete
novalidate
target
formaction
formenctype
formmethod
formnovalidate
formtarget
accept-charset
New Attributes for <input>
--------------------------
autocomplete
autofocus
form
list
min and max
multiple
pattern (regexp)
placeholder
readonly
required
step
size
maxLength
inputmode
formaction
formenctype
formmethod
formnovalidate
formtarget
var x=10 //number
var x="siva" // string
var x="10" // string
10+20 = 30
"siva"+"soft" = sivasoft
"10"+"20" = 1020
<input> : input fields or form fields
<textarea></textarea>, <select></select>, <form></form> : form tags
<input
type="text" <!-- HTML4: Specifies a single-line text input -->
name="firstname" <!-- HTML4: Name of the input field -->
value="Siva" <!-- HTML4: Default value for the input -->
id="firstname" <!-- HTML4: Unique identifier for the input -->
maxlength="30" <!-- HTML4: Maximum number of characters allowed -->
readonly <!-- HTML4: Makes the input field non-editable -->
disabled <!-- HTML4: Disables the input field -->
size="10" <!-- HTML4: The size attribute is set to 10, meaning the input field will
be wide enough to display 10 characters in the input box. -->
placeholder="Enter your first name" <!-- HTML5: Placeholder text shown when input is empty
-->
required <!-- HTML5: Specifies that the field must be filled before submitting the form
-->
minlength="2" <!-- HTML5: Minimum number of characters required -->
pattern="[A-Za-z]+" <!-- HTML5: Regular expression for validating input -->
autocomplete="given-name" <!-- HTML5: Autocompletion based on the type of input -->
><br>
<input
type="password" <!-- HTML4: Specifies a password input field, the entered text is hidden
-->
name="password" <!-- HTML4: Name of the input field -->
value="Soft123" <!-- HTML4: Default password value -->
id="password" <!-- HTML4: Unique identifier for the input -->
maxlength="20" <!-- HTML4: Maximum number of characters allowed -->
readonly <!-- HTML4: Makes the input field non-editable, but the value can be copied
-->
disabled <!-- HTML4: Disables the input field, making it unselectable -->
size="10" <!-- HTML4: The size attribute is set to 10, meaning the input field will
be wide enough to display 10 characters in the input box. -->
placeholder="Enter your password" <!-- HTML5: Placeholder text shown when input is empty
-->
required <!-- HTML5: Specifies that the field must be filled before submitting the form
-->
minlength="6" <!-- HTML5: Minimum number of characters required -->
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" <!-- HTML5: Regular expression to enforce strong
password requirements -->
autocomplete="current-password" <!-- HTML5: Autocompletion for the current password -->
><br>
<textarea
name="message" <!-- HTML4: Name of the textarea field -->
rows="4" <!-- HTML4: Number of visible rows -->
cols="50" <!-- HTML4: Number of visible columns -->
maxlength="500" <!-- HTML4: Maximum number of characters allowed -->
readonly <!-- HTML4: Makes the textarea field non-editable, but the value can be
copied -->
disabled <!-- HTML4: Disables the textarea field, making it unselectable -->
placeholder="Enter your message here" <!-- HTML5: Placeholder text shown when input is
empty -->
required <!-- HTML5: Specifies that the field must be filled before submitting the
form -->
autofocus <!-- HTML5: Focuses on this field on page load -->
spellcheck="true" <!-- HTML5: Enables spellchecking -->
></textarea><br>
<select
name="options" <!-- HTML4: Name of the select field -->
id="options" <!-- HTML4: Unique identifier for the select element -->
required <!-- HTML5: Specifies that the field must be filled before submitting the
form -->
disabled <!-- HTML4: Disables the select field, making it unselectable -->
autofocus <!-- HTML5: Focuses on this field on page load -->
multiple <!-- HTML5: Allows the user to select multiple options -->
size="5" <!-- HTML4: Specifies the number of visible options in the dropdown
(without scrolling) -->
>
<optgroup
label="Group 1" <!-- HTML4: Grouping options for easier categorization -->
disabled <!-- HTML4: Disables the group of options -->
>
<option value="1" selected>Option 1</option> <!-- HTML4: Option for the select dropdown,
marked as selected -->
<option value="2" disabled>Option 2</option> <!-- HTML4: Option for the select dropdown,
disabled -->
</optgroup>
<optgroup
label="Group 2" <!-- HTML4: Grouping options for easier categorization -->
>
<option value="3">Option 3</option> <!-- HTML4: Option for the select dropdown -->
<option value="4" selected>Option 4</option> <!-- HTML4: Option for the select dropdown,
marked as selected -->
</optgroup>
<option value="5" disabled>Option 5</option> <!-- HTML4: Option for the select dropdown,
disabled -->
<option value="6">Option 6</option> <!-- HTML4: Option for the select dropdown -->
</select><br>
id: unique
<input
type="radio" <!-- HTML4: Specifies the input as a radio button -->
name="gender" <!-- HTML4: Groups the radio buttons together so only one can be
selected -->
value="male" <!-- HTML4: Value that will be sent when this radio button is selected -->
id="male" <!-- HTML4: Unique identifier for the male radio button -->
checked <!-- HTML4: Specifies that this radio button should be pre-selected -->
> Male<br> <!-- HTML4: Label for the male radio button -->
<input
type="radio" <!-- HTML4: Specifies the input as a radio button -->
name="gender" <!-- HTML4: Groups the radio buttons together so only one can be
selected -->
value="female" <!-- HTML4: Value that will be sent when this radio button is selected -->
id="female" <!-- HTML4: Unique identifier for the female radio button -->
> Female<br> <!-- HTML4: Label for the female radio button -->
<input
type="radio" <!-- HTML4: Specifies the input as a radio button -->
name="gender" <!-- HTML4: Groups the radio buttons together so only one can be
selected -->
value="other" <!-- HTML4: Value that will be sent when this radio button is selected -->
id="other" <!-- HTML4: Unique identifier for the other radio button -->
disabled <!-- HTML4: Disables the radio button, making it unselectable -->
> Other (disabled)<br> <!-- HTML4: Label for the other radio button -->
<input
type="checkbox" <!-- HTML4: Specifies the input as a checkbox -->
name="subscribe" <!-- HTML4: Name of the checkbox field -->
value="yes" <!-- HTML4: Value that will be sent when the checkbox is checked -->
id="subscribe" <!-- HTML4: Unique identifier for the checkbox -->
checked <!-- HTML4: Pre-selects the checkbox when the page loads -->
> Subscribe to newsletter<br> <!-- HTML4: Label for the checkbox -->
<input
type="checkbox" <!-- HTML4: Specifies the input as a checkbox -->
name="terms" <!-- HTML4: Name of the checkbox field -->
value="agree" <!-- HTML4: Value that will be sent when the checkbox is checked -->
id="terms" <!-- HTML4: Unique identifier for the checkbox -->
disabled <!-- HTML4: Disables the checkbox, making it unselectable -->
> I agree to the terms and conditions<br> <!-- HTML4: Label for the checkbox -->
<input
type="file" <!-- HTML4: Specifies a file upload input field -->
name="resume" <!-- HTML4: Name of the file input field -->
id="resume" <!-- HTML4: Unique identifier for the file input -->
accept=".pdf,.doc,.docx" <!-- HTML5: Specifies the types of files accepted -->
multiple <!-- HTML5: Allows selection of multiple files -->
required <!-- HTML5: Makes the field mandatory before form submission -->
disabled <!-- HTML4: Disables the file input, making it unselectable -->
><br>
<input
type="submit" <!-- HTML4: Specifies the button as a form submission control -->
name="submitBtn" <!-- HTML4: Name of the submit button -->
id="submitBtn" <!-- HTML4: Unique identifier for the submit button -->
value="Submit Form" <!-- HTML4: Text displayed on the submit button -->
formaction="/[Link]" <!-- HTML5: URL to send the form data to when this button is used
-->
formenctype="multipart/form-data" <!-- HTML5: Specifies how the form data should be
encoded -->
formmethod="post" <!-- HTML5: HTTP method used when the form is submitted -->
formtarget="_blank" <!-- HTML5: Opens the response in a new tab or window -->
formnovalidate <!-- HTML5: Submits the form without validation -->
disabled <!-- HTML4: Disables the submit button -->
><br>
<input
type="reset" <!-- HTML4: Specifies a button that resets all form values to their defaults
-->
name="resetBtn" <!-- HTML4: Name of the reset button -->
id="resetBtn" <!-- HTML4: Unique identifier for the reset button -->
value="Reset Form" <!-- HTML4: Text displayed on the reset button -->
disabled <!-- HTML4: Disables the reset button -->
form="myForm" <!-- HTML5: Associates the button with a specific form by its ID -->
formtarget="_self" <!-- HTML5: Target window for form action (not functional with reset,
included for syntax consistency) -->
><br>
<input
type="hidden" <!-- HTML4: Specifies an invisible input field for storing hidden data -->
name="sessionId" <!-- HTML4: Name of the hidden input field -->
id="sessionId" <!-- HTML4: Unique identifier for the hidden input -->
value="abc123" <!-- HTML4: The hidden value to be sent when the form is submitted
-->
form="myForm" <!-- HTML5: Associates the hidden field with a specific form by ID -->
><br>
<form
action="/[Link]" <!-- HTML4: URL where form data is sent on submission -->
method="post" <!-- HTML4: HTTP method used for sending form data ("get" or
"post") -->
name="userForm" <!-- HTML4: Name of the form, used for reference in scripts -->
id="userForm" <!-- HTML4: Unique identifier for the form -->
enctype="multipart/form-data" <!-- HTML4: Encoding type for form data (used when
uploading files) -->
target="_blank" <!-- HTML4: Where to display the response after submitting the
form -->
autocomplete="on" <!-- HTML5: Enables or disables browser autocomplete -->
novalidate <!-- HTML5: Disables HTML5 validation when the form is submitted
-->
accept-charset="UTF-8" <!-- HTML4: Character encoding for form submission -->
>
<!-- form content goes here -->
</form><br>
What is HTML URL ENCODING?
--------------------------
when we send data through a URL(for example, in a form submission or API request(react,
angular)), some characters are not allowed in URLs directly.
Because URLs can only contain letters, numbers and a few special special characters (-_.~)
safely
If we want to send special characters like spaces, slashes, question marks, or ampersands(&),
we need to encode them into a special format so the browser / server can understand them
properly.
This process is called URL encoding.
How it Works?
--------------
Special characters are replaced with a percent symbol followed by two hexadecimal digits
(space - %20).
These hexadecimal digits represent the ASCII value of that character.
Character Encoded as
---------------------------------------------------
Space " " %20 or +
! %21
# %23
$ #24
% %25
& %26
@ %40
/ %2F
Why this URL encoding is important?
-----------------------------------
[Link]
[Link]
[Link] soft
q=siva+soft%21 or q=siva%20soft%21
The space between siva and soft would cause problems, because
[Link] are not allowed in URLs
2.A space in a URL is often interpreted by the browser as the end of the URL
[Link] soft&country=INDIA
space between Siva and Soft is not encoded, the server might understand that Siva and
soft&country=INDIA are different parts of the URL
After encoding
[Link]
NOTE: it prevents miscommunication between the browser (or web server) and the URL
CSS
---
XHTML
-----
XHTML stands for eXtensible Hyper Markup Language
XHTML is a stricter and cleaner version of HTML.
XHTML is supported by all major browsers
Differences between HTML and XHTML
----------------------------------
HTML XHTML
----------------------------------------------------------------------------------------
doctype is optional doctype is mandatory
<b><i>----</b></i> <b><i>-----</i></b>
<p>------- <p>-------</p>
<P>----</p> <p>-------</p>
<br>, <hr>, <img> <br/>, <hr/>, <img/> - self closed
<IMG SRC=[Link]> <img src="[Link]"> or
<img src='[Link]'>
<hr noshade> <hr noshade="noshade" />
<input type="text"> <input type="text"/>
<input type="checkbox" checked> <input type="checkbox" checked="checked"/>
NOTE: [Link]
HTML
----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
<html>
XHTML
-----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
HTML5
-----
<!DOCTYPE html>
HTML, Angular : <br>, <hr>, <img>
XHTML, REACT : <br/>, <hr/>, <img/>
#ff00ff - 32 bit color
#f0f - 64 bit
You might also like
- Front-End Development: HTML, CSS, JS GuideNo ratings yetFront-End Development: HTML, CSS, JS Guide143 pages
- J2EE Overview: Web Applications & HTML BasicsNo ratings yetJ2EE Overview: Web Applications & HTML Basics11 pages
- HTML and CSS Basics for Web DevelopmentNo ratings yetHTML and CSS Basics for Web Development85 pages
- Client-Side Scripting Basics: HTML & CSSNo ratings yetClient-Side Scripting Basics: HTML & CSS85 pages
- Introduction to Internet and HTML BasicsNo ratings yetIntroduction to Internet and HTML Basics20 pages
- Understanding Internet and Web DevelopmentNo ratings yetUnderstanding Internet and Web Development17 pages
- Internet and Web Technologies Lab GuideNo ratings yetInternet and Web Technologies Lab Guide14 pages
- HTML5: Essential Guide to Web DevelopmentNo ratings yetHTML5: Essential Guide to Web Development39 pages
- Introduction to Web Applications and HTMLNo ratings yetIntroduction to Web Applications and HTML27 pages
- Understanding HTML Basics for Web DevelopmentNo ratings yetUnderstanding HTML Basics for Web Development64 pages
- Web Technology: HTML & Internet ProtocolsNo ratings yetWeb Technology: HTML & Internet Protocols107 pages
- Grade 11 Mathematics Exam Paper 2 - June 2023No ratings yetGrade 11 Mathematics Exam Paper 2 - June 202323 pages
- Indian Equity Market Update August 2019No ratings yetIndian Equity Market Update August 201915 pages
- VTMIS: Enhancing India's Maritime SafetyNo ratings yetVTMIS: Enhancing India's Maritime Safety26 pages
- Overview of Boring Methods in Civil EngineeringNo ratings yetOverview of Boring Methods in Civil Engineering17 pages
- Halal Amroon (SD 0208,0209,0310,0311,011225) Seku9080530No ratings yetHalal Amroon (SD 0208,0209,0310,0311,011225) Seku90805303 pages
- Important Computer Applications QuestionsNo ratings yetImportant Computer Applications Questions10 pages
- Understanding Radioactivity and Its EffectsNo ratings yetUnderstanding Radioactivity and Its Effects7 pages
- CBSE Class 12: Alcohols and Ethers Test Paper100% (1)CBSE Class 12: Alcohols and Ethers Test Paper2 pages
- Turla and Gamaredon Hack Groups CollaborateNo ratings yetTurla and Gamaredon Hack Groups Collaborate4 pages