My First HTML Lesson: The Basics of Building Web Pages

Starting with HTML can be both exciting and overwhelming! Here’s a quick look at what I learned in my very first HTML lesson.

What is HTML?

HTML (Hypertext Markup Language) is the backbone of any web page. It structures the content we see on websites and allows us to create text, images, links, and more.

Key Takeaways from My First Lesson

-Index.html file:When creating an html file, we first create an a file called index.html. One can also call name it as index.htm .

Why index.html and not default.html or anything.html

This is because index.html can easily be read by the server, although default.html was also being used in the back days and it faded out, as many people adopted the index, html.

The Apache2 server

There are many servers except this, for example GoDaddy, Nginx, Caddy, Lighttpd and others.
But the most commonly used one is the Apache HTTP server.
We also have the cPanel server which has default folders give to us by Apache var/html/...
Also, the Nginx server gives us the same services as cPanel.
One can simply define a server as software which serve since they allow users to access different websites.

When writing index.html file, we should consider following the industry standard, that is writing with speed
and this can be done through using Emmet or any plugin tool.

What's happening behind the server

*When a client makes a request in a web browser, the server responds to the request by checking in its local storage for any matching information of what the client wants. The server retrieves them, and then displays them.

How the live server extension is able to change the saved document after refreshing the local host

The live server extension version is available depending on which vs code version you are using. Other text Editors can be: sublimetxt, fleet, code blocks and so many others.

HTML CODE

!DOCTYPE html tag
*Browsers were designed to follow up these files, therefore one has to explicitly show the type of files the browser is dealing with, for storage.

html lang = en tag
*We also specify the language in which we are writing our code. This helps the web browser to know in which language it would have to serve or run, for this case, it would be English language.

head tag
*Content inside this tag can not be seen on a website when opened

body tag
*All the content written within this tag is explicitly shown and can be viewed by other people who may access the website.

Any website is a good one if it can be easily accessed by anyone and also enhances readability, even to screen readers.

• Basic Tags: I learned about the fundamental tags :

• Creating Headings and Paragraphs: Using <h1> to <h6> for headings and <p> for paragraphs. These also have attributes or properties that can be used with them, for example: title,
  that is,h1 title="Html code".For the heading, this title will only be seen when you hoover over the text within the h1 tag.
  We can also use lorem[number of words] in paragraphs, that is,
  p lorem200 p and this will display 200 words of text in your paragraph.

• Adding Links, Line Breaks and Images: I practiced embedding images with <img src="URL"> and creating links with<a href="URL">.
  br gives us a line break.

For the **img* tag, we have the alt attribute, it is so useful in a way that if the src-source of the image is wrong, we can et to know the exact point at the the image is not showing. This is especially most useful when we are are having a large document with many images.
We should also consider having size attribute for all images as a good practice.
*We use *srcset when having more than one image for a given img tag.
if I have another html file or any other file, and I want it to be accessed by anyone who will visit my website, then I can use the *anchor tag,a* in my index.html file.

Some tags give line spaces when used(br), unlike others(h1,h2)

Learning HTML is just the start of my web development journey, but it’s a crucial step!

Follow along as I dive deeper into HTML and beyond!

Connect with Me

• GitHub: github.com/macquelineleya
• LinkedIn: linkedin.com/in/macquelineByali