Network & Web Designing
HTML(Tim Berners-Lee)
➢ For HTML- Sublime Text & VS Code(Live Server & Beautify CSS).
➢ HTML(Hyper Text Markup Language) is a markup language.
➢ Markup Language-
Versions of HTML:-
1. 1991-HTML-1
2. 1993-HTML-2
3. 1995-HTML-3
4. 1997-HTML-4
5. End of 1997-HTML-5 we use <!DOCTYPE>
6. HTML-5.2(Latest Version).
Things need to learn HTML:-
• Text Editor(Note pad), (Sublime Text).
• Compiler(VS Code).
• For Run code(Chrome, Firefox, Edge, Opera).
Basic Code:-
<tag>-Open Tag
</tag>-Close Tag
<!DOCTYPE html>
<html>-Basic tag
<head>-Basic tag
<title>title of webpage</title>
</head>
<body>
Everything written within the body tag
</body>
</html>
Heading Tag:-
From <h1>Big heading</h1> to <h6>Small heading</h6>
Paragraph Tag:-
<p>Enter you paragraph</p>
Break Tag:-
The <br> tag inserts a single line break.
The <br> tag is useful for writing addresses or poems.
The <br> tag is an empty tag which means that it has no end tag.
Horizontal Tag:-
<hr> is used to draw a horizontal line.
Text Styling Tags(Formatting Tags):-
<b> - Bold text - This text is bold.
<strong> - Important text - This text is important!
<i> - Italic text - This text is italic.
<em> - Emphasized text - This text is emphasized.
<mark> - Marked text - milk
<small> - Smaller text - This is some smaller text.
<del> - Deleted text - My favorite color is red.
<ins> - Inserted text - My favorite color is red.
<sub> - Subscript text - This is subscripted text.
<sup> - Superscript text- This is superscripted text.
<u>- Underline text- league in 2007
Image Tag:-
The HTML <img> tag is used to embed an image in a web page.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image.
Syntax:-
Image & Alt Tag
<img src="url" alt="alternatetext">
Image, Alt Tag & Style
<img src="url" alt="some text" style="width:500px;height:600px;">
Types of List:-
Two types of List
• Ordered List
• Unordered List.
Unordered List:-
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Syntax:-
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
O/P:-
• Coffee
• Tea
• Milk
Ordered List:-
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Syntax:-
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
O/P:-
1. Coffee
2. Tea
3. Milk
Syntax:-
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
O/P:-
i. Coffee
ii. Tea
iii. Milk
PROJECT-1:-
Create the list as shown in a below image.
NOTE : Create all the list elements as Links
1. History
i. Background
ii. Foundation
iii. Expansions and termination
2. Administration
3. Organisation
i. Tournament format
ii. Player acquisition, squad composition and salaries
iii. Match rules
iv. Prize money
4. Teams
i. Current teams
ii. Defunct teams
iii. Timeline
5. Tournament seasons and results
i. Performance in the IPL by title
ii. IPL season results
6. Teams performance
i. League stage positions
7. Awards
i. Orange Cap
ii. Purple Cap
iii. Most Valuable Player
iv. Faimlay Award
v. Emerging player award
vi. Most scores Award
8. Financials
i. Title Sponsorship
ii. Payments to foreign national boards
iii. Brand value
9. Broadcasting
i. Sony and WSG (2008-2017)
ii. Star India(2018-2022)
iii. 2023-2027
iv. International broadcasters
10. Controversy
i. 2012 and 2013 IPL spot facing and betting match
ii. Sponsorship
11. See also
12. References
13. External links
O/P:-
<!DOCTYPE html>
<html>
<head>
<title>Create the List</title>.
<style>
h3 {text-align: center;}
</style>
<style>
h1 {text-align: center;}
</style>
<h3>Create the list as shown in a below image.</h3>
<h1>NOTE : Create all the list elements as Links</h1>
</head>
<body>
<ol>
<li>History</li>
<ol type="i">
<li>Background</li>
<li>Foundation</li>
<li>Expansions and termination</li>
</ol>
<li>Administration</li>
<li>Organisation</li>
<ol type="i">
<li>Tournament format</li>
<li>Player acquisition, squad composition and salaries</li>
<li>Match rules</li>
<li>Prize money</li>
</ol>
<li>Teams</li>
<ol type="i">
<li>Current teams</li>
<li>Defunct teams</li>
<li>Timeline</li>
</ol>
<li>Tournament seasons and results</li>
<ol type="i">
<li>Performance in the IPL by title</li>
<li>IPL season results</li>
</ol>
<li>Teams performance</li>
<ol type="i">
<li>League stage positions</li>
</ol>
<li>Awards</li>
<ol type="i">
<li>Orange Cap</li>
<li>Purple Cap</li>
<li>Most Valuable Player</li>
<li>Faimlay Award</li>
<li>Emerging player award</li>
<li>Most scores Award</li>
</ol>
<li>Financials</li>
<ol type="i">
<li>Title Sponsorship</li>
<li>Payments to foreign national boards</li>
<li>Brand value</li>
</ol>
<li>Broadcasting</li>
<ol type="i">
<li>Sony and WSG (2008-2017)</li>
<li>Star India(2018-2022)</li>
<li>2023-2027</li>
<li>International broadcasters</li>
</ol>
<li>Controversy</li>
<ol type="i">
<li>2012 and 2013 IPL spot facing and betting match</li>
<li>Sponsorship</li>
</ol>
<li>See also</li>
<li>References</li>
<li>External links</li>
</ol>
</body>
</html>
