Hey there fellow learners! Today was an exciting day as I delved into the world of web development and began my journey with HTML(Hypertext Markup Language). It's cool to see how this simple yet fundamental language forms the Skeleton of almost all web pages we encounter on the internet. Here I will share some of the basic HTML knowledge I was able to walk away with on https://www.codecademy.com/courses/learn-html-fundamentals
What is HTML?
HTMl is a markup language used to create the structure and content of web pages. It stands for "HyperText Markup Language" and is the basis of the World Wide Web. HTML consist of elements, which are represented by tags enclosed in angle brackets. These tags define the form and substance of web pages, such as headings, paragraphs, links, images, and more.
Basic HTML Structure
HTML is organized into a family tree structure. HTML elements can have parents, grandparents, siblings, children, grandchildren, etc. To form a HTML page, we start with a basic structure:
html
<!DOCTYPE html>
<html>
<head>
<title>New HTML Page</title>
</head>
<body>
<p>only content inside</p>
</body>
-
,DOCTYPE html>: This declaration lets the browser know that the document is an HTML5 document. -
<html>: The root element of the HTML page, containing all the other elements. -
<head>: this section contains meta-information about the HTML document, such as title, css styles, and more. -
<title: This tag sets the title of the web page that appears in the browser's title bar AKA tab. -
<Body>: The content of the web page is placed within this element The example above includes text content within the body element but we can use a variety of elements to structure different content!
Creating Content
HTML allows us to structure content in various ways. Here are some essential elements:
- Headings: To create headings of different levels, we use tags that range from
<h1>to<h6>. h1 being the largest or "main heading" to h6 being the smallest or "sub heading". see example:
<h1>Welcome to My Website</h1>
- Paragraphs: Text content enclosed in
<p>tags to create paragraphs.
<p>This a paragraph of text</P>
- Emphasis element : The
<em>element emphasizes text and browsers will usually italicize the emphasized text by default.
<p>This <em>word</em> will be emphasized in italics.</P>
- links: Hyperlinks are created using the anchor tag
<a>for instance:
<a href="https://www.example.com">Visit Example Website</a>
- Images and videos: To display images or videos use
<img>or/and<video>tags along with thesrcattribute respectively. when linking a video be assured to add control attribute to allow for media controller for playing or pausing included media. EX:
<img src="image.jpg" alt= description of image">
<videos src="test-video.mp4" controls> video not supported </video>
- ordered list: The
<ol>ordered list element creates a list of items<li>in sequential order. Each list item appears numbered by default.
<ol>
<li>Pre-heat oven to 325 F👩‍🍳</li>
<li>Drop cookie dough🍪</li>
<li>Bake for 15 minutes⏰/li>
</ol>
- unordered list: The
<ul>unordered list element is used to create a list of items in no particular order. Each individual list item will have a bullet point by default.check out the supply list to make spitballs!
<ul>
<li>straw</li>
<li>paper</li>
<li>spit</li>
<li>air</li>
</ul>
- division: The
<div>element is used as a container that divides an HTML document into sections and is short for “division”.<div>elements can contain flow content such as headings, paragraphs, links, images, etc.
<div>
<h1>Heading of this section</h1>
<p>some text for this section</p>
</div>
<div>
<h1>Second section of grouped elements</h1>
<p>Here's some text</p>
</div>
Understanding Attributes
HTML elements can be nested within each other to create complex structures. Just remember to close tags in the reverse order they were opened to maintain the HTML's proper hierarchy.
Validation and Browser Compatibility
One essential aspect of HTML is validation. Always double check to make sure that your code is valid, meaning it follows the rules and syntax of the HTML standard. Online validators such as https://www.freeformatter.com/html-validator.html
Also, keep in mind browser compatibility. While modern browsers are generally good at handling HTML, some older browsers may not support all the latest features. Always Test your pages across different browsers to ensure a consistent user experience.
Conclusion
Today was a fantastic journey into the basics of HTML. I've learned how to create the fundamental structure of a web page, add content, and create links and images. The possibilities seem endless, and i am eager to explore more HTML elements and attributes as i continue on My web developement adventure. Stay tuned for more updates on my TIL blog series! Happy Coding!!🚀
Top comments (0)