Learning HTML - Day 2
Today is the 26th January 2021 and it is my second day to learn HTML 🙋
Day 2 - Time 12.30 pm - 1:00 pm
Day1 Day3 Day4 Day5 Day6 Day7 Day8 Day9
Day 1 - HTML structure, Header tags, Paragraph tags, Line break, Horizontal line break.Text Tags
Code :
<html>
<head>
<title>Title of the webpage</title>
</head>
<body>
<!---Using line break tag, horizontal break tag---!>
<b>Bold Text</b>
<i>Italic Text</b><br>
<!---Bold Text and Italic text are in a single line, using line break and check again---!>
<b>Bold Text</b><br>
<i>Italic Text</i><br><hr>
<!---Using horizontal line break tag---!>
<u>Underlined text</u><br>
<strike>Strike through text</strike>
</body>
</html>
Output :
Lists - Ordered Lists, Unordered Lists
An unordered list starts with <ul> tag and an ordered list starts with the
<ol> tag. Each list item starts with the <li> tag. The closing tags are required.<html>
<head>
<title>Title of the webpage</title>
</head>
<body>
<h3>
<u>Unordered List</u>
</h3>
<ul>
<!---Unordered List tag---!>
<li>Sunday</li><!---List element tag---!>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
</ul>
<h3> <u>Ordered List</u></h3>
<ol><!---Ordered List tag---!>
<li>Sunday</li><!---List element tag---!>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
</ol>
</body>
</html>
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:<html>
<head>
<title>Title of the webpage</title>
</head>
<body>
<p>
<h3>
Description
List
</h3>
<dl>
<dt>Cow</dt>
<dd>It
is a domestic animal</dd>
<dd>Gives us milk</dd>
</dl>
</p>
</body>
</html>
Testing written code in a web browser
- Write the code in Notepad, now to save the file, select "All Files" in Save as type: and then enter the name (any name by which we want to save) say I choose "Test.html" note - .html is to be added and then save it. Once saved we can open the file and check the display of the code that we have written in our web browser.
Changing the background color to my preference
<html>
<head>
<title>My web page</title>
</head>
<body bgcolor="blue">
</body>
</html>
Setting an image as my background
<html>
<head>
<title>My web page</title>
</head>
<body bgcolor="pink" background ="C:\Users\User\OneDrive - AgreeYa\Desktop\IPL Team Logos\Chennai Super Kings.png">
</body>
</html>
Font tag - The <font> tag was used in HTML 4 to specify the font face, font size, and color of text.
Size - You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.
Face - The font-face rule allows custom fonts to be loaded on a webpage, some common
Color - The font color allows customer color to be loaded on the text
Using Image from web to show as my background
<html>
<head>
<title>My web page</title>
</head>
<body background ="https://cdn.britannica.com/63/211663-050-A674D74C/Jonny-Bairstow-batting-semifinal-match-England-Australia-2019.jpg">
</body>
</html>
Body background uses the entire background page
Using img and style attribute
<html>
<head>
<title>My web page</title>
</head>
<body>
<img src="https://cdn.britannica.com/63/211663-050-A674D74C/Jonny-Bairstow-batting-semifinal-match-England-Australia-2019.jpg" alt="Batsman" style="width:250px;">
</body>
</html>
HTML Attributes
- All HTML elements can have attributes
- The
hrefattribute of<a>specifies the URL of the page the link goes to - The
srcattribute of<img>specifies the path to the image to be displayed - The
widthandheightattributes of<img>provide size information for images - The
altattribute of<img>provides an alternate text for an image - The
styleattribute is used to add styles to an element, such as color, font, size, and more - The
langattribute of the<html>tag declares the language of the Web page - The
titleattribute defines some extra information about an element
An anchor link is a link that helps to link to the content on the same page that has an anchor attached.
| <html> | |
| <head> | |
| <title>My web page</title> | |
| </head> | |
| <body> | |
| Linking text within html | |
| <a href="#a1">Link to Malay</a> | |
| <H1 id="a1"> | |
| ...pages and pages... | |
| <A name="a1"></A> | |
| </body> | |
| <html> |
The <mark> element is used to define a section of the content that should be highlighted. By default, most browsers render text within <mark> tags as black text on a yellow background.
<html>
<head>
<title>My web page</title>
</head>
<body>
<del>This is a deleted text</del>
This is something writtent in <mark>Hello</mark>
</body>
</html>
<Del> tag
Featured snippet from the web
END OF DAY 2
Comments
Post a Comment