Categories
Programming & Dev

Web Development phase 1: HTML

HTML (Hypertext Markup Language) is a standard language for creating web pages and forms the basic structure to a web page. It is like bones to a human body. So in this blog, we will be learning about the basics of Html.

So How does HTML structure a web page?

Simple! it uses a variety of *tags* to make them look/act in a certain way. The content is enclosed by suitable tags. Suppose we have a statement like this 

Hey there! How are you ?

And we want this to put this as a heading to our web page, so we will write something like this

<h1> Hey there! How are you ? </h1>

Here , this simple line is composed of the following things

  • Tag (opening and closing): a tag is a simple word written inside <> and that word tells HTML to do the thing it is supposed to do when that tag is used

Here h1 tag has two parts

       Opening(<h1>)

And Closing(</h1>) 

Opening and closing simply represents the part in which this tag is to be applied

  • Content -  It is the text/thing where the tag will apply it’s feature to

Now there is something called an ‘attribute’ which adds some character to a tag.

For eg 

                   <h1 id=”page-heading”> Hey there! How are you ? </h1>

Here id is the attribute and page-heading is it’s value and this attribute has added an id to this tag which we can use further for designing this element.

Now interestingly some of the tags don’t have these closing tags.like 

<br>   - to break the current row(to start a new line)

<img> - to add an image 

And these types of tags are called empty tags and the earlier ones (with both opening and closing) are called container tags.

Now, what does a basic HTML document/file look like?

html

Now let’s see the Anatomy of a HTML document

  • <!DOCTYPE html> - way back in time this used to contain certain rules for HTML documents but nowadays it just represents an HTML 5 document and it is of no such use to know depth about it as of now.
  • <html lang=” en”> - this holds the whole HTML code and is generally called the root element 
  • <head> - this contains necessary information which isn’t directly displayed on the webpage like links to stylesheets/scripts/resources meta tags and all.
  • <meta charset =” UTF-8”> - this basically includes sets of characters from the vast majority of languages.it is used so that the document can hold any textual content from any language without any issue.
  • <title> - it holds the title of the page which appears on the top of the tab in which the site is opened.
  • <body> - it contains all the content that is to be put on the site such as text images paragraphs etc.
html

Tags for marking up text

Heading(<h1>,<h2>,...,<h6>)

This element allows us to create headings in different font sizes (from h1 till h6)

h1 is the largest heading and h6 being the smallest

Eg:  <h1>heading 1</h1>

       <h2>heading 2</h2>

    .

    .

    .

       <h6>heading 6</h6>

Paragraph(<p> .... </p>) 

This element allows us to create a normal paragraph. It is most widely used while writing any piece of text.

Eg: <p> This is a sample paragraph </p>

Lists(<ol>..</ol> &<ul>..</ul> )

Lists can be ordered(numbered or alphabetical) and unordered(bulleted)

Lists contain list items and those are enclosed within <li> </li>

Eg: 

To make a simple list like this 

  1. One
  2. Two
  3. Three

We have to write this

<ul>

    <li>One</li>

    <li>Two</li>

    <li>Three</li>

<ul>

And to make the unordered list we will simply replace ul by ol

Links and images

Hyperlinks (<a href =””>... </a>)

Hyperlinks are simple underlined blue coloured texts which take you to a destination when they are clicked.

Making a link is simple, you need to enclose the text within <a> </a>(anchor) tag and give it a reference(which this link should go) using href attribute 

Eg: 

Click here to go to Google.com

Can be made using the following 

<a href=”https://www.google.com/">Click here to go to Google.com </a>

Images(<img>)

Images can be added simply using the <img> tag with the src attribute which provides the source from where the images will come from.

There can be two cases :

  1. If the image's src is within the local system(we will write the whole path of img inside src )
  2. If the image src is somewhere on the web(we will paste the link of that image inside src)

Eg:     <img src =”C:\Users\ridsuteri\Documents”>(to add image from the local system)

    <img src = “https://picsum.photos/536/354”>(to add image from the web)

There are many such more tags like these and it’s obviously not possible to cover them all here in this blog, so now that you are familiar with the basics of HTML it’s your home task to look up more tags and read further about HTML from the web.

Get the latest tech news and updatesethical hacking tutorials and cybersecurity tips and tricks. Check out MeuSec for more.

Sometimes we include links to online retail stores and/or online campaigns. If you click on one and make a purchase we may receive a small commission.

Comments:

Leave a Reply

Your email address will not be published. Required fields are marked *