Table of contents
Wanna learn web development from the very scratchhhh!! You got the right place. So, without wasting even 1/100th of a second, let's begin this beautiful journey!
Now, website development is not the task of one language or two, it requires a good grip over several ones, like - HTML, CSS, JAVA SCRIPT, to name a few. Each having their own function inside a web page. Don't worry even a bit as one by one we'll scroll upon all of them. In this blog, we shall be discussing about HTML and a brief intro to CSS.
HTML
- Hyper Text Markup language is the most basic and fundamental component of building a good looking webpage.
- It can be regarded as the skeleton of the 🕸page that requires the assistance of other organs to become a well blossomed one.
- A basic HTML editor page looks like:
- Writing the content via HTML and designing it using CSS, even only this much can make a website good looking.
CSS
- Cascading Style Sheet is the language used for decorating the content of HTML page so that it looks attracting and readable.
- A basic css editor page looks like:
Here's a demonstration of a website with and without css:
HTML only, no css
Only a bit of css
Following this, we shall now discuss the components of an html page broadly:
<!DOCTYPE html>
- Tells about the type of document we are going to write, here html, and saves time for both browser and the developer as it is written in the very first line of the editor page.
Before you read the next one, let's know about tags:
- The relation of HTML and tags is like that of a body with its body i.e. learning HTML means exploring tags.
- Tag is an element in html that is applied to implement a particular action.
- It is represented as - <tag_name>.... </tag_name> or <tag_name......>
- HTML is full of tags e.g. <html>.... </html>, <body>....</body>, <head>....</head>, <table>,....</table>, <header>,.....</header>, <img......>and much much more.
- Take it easy. We'll get familiar with all of these after a little span of programming.
Now let's resume our talk upon components of HTML editor page:
<html>
- It marks the beginning of something that will affect our webpage.
- All other elements this page are used inside it. It can be seen as the outer layer of html page that contains in it each and every content of the page.
- It can be broadly divided into : <head> and <body>.
<head>
- It contains the information for browser understanding like- device width, responsive part ( so that webpage runs in different devices without any dimensions problems ), <title> tag to assign title to the tab of browser, <link> tag to link the css page, <script> tag to link the java script page ( we'll learn about all these later on )
<meta>
- After developing a website, we upload it to the browser and now no one knows the variety of devices in which it is going to be viewed.
- We need to develop a website that can run over each device without compensating with the ratios of length and width of elements so that the beauty remains the same.
<title>
- It is the title of the tag in which our website is going to be opened.
<body>
- It is the one containing all the content of the viewport of website ( everything that is visible to us in the webpage ) like the texts, images, headings, audios, videos, rows, tables and a lot more.
- It is the hub of tags. Tags here and there. Tags for this and that purpose.
Further few other essential components of a webpage are as follows:
<p>
- Used to write a paragraph.
- Syntax : <p>......</p>
<hr>
- To provide a horizontal line to separate two elements.
- Syntax : <hr>
HTML:
CSS:
<br>
- To give a break to a the ongoing text so that the next part appears on a new line.
- Syntax : <br>
HTML:
CSS:
Tags like - <hr> and <br> have no closing and thus are called empty tags.
Before moving to further tags let's first know about attributes:
- Attributes can be regarded as the sub-elements of tags.
- The syntax for mentioning an attribute inside a tag is like: <tag attribute-1 = " " attribute-2 = " "></tag>
- Attributes are used inside a tag to specify them a bit more, many-a-times to provide additional info about them ex- 'placeholder' attribute inside <input> tag ( we will learn about this in HTML forms) and sometimes to style the element ( 'style' attribute).
<img>
- To add an image to html page.
- Syntax : <img src="image_location" alt="alternative">
Image Attributes
- src contains the url/path of the image.
- alt refers to alternate i.e. when the image fails to load the text inside 'alt' would be displayed as an alternative.
<marquee>
- To move the text or image
- <marquee direction="right/left/up/down">..content...<marquee>
Comments in HTML
- Comments are that part of HTML body that do not appear in the webpage and are totally for the understanding of the developer.
- Commenting out the need to use a particular element, along with the program, is a good deed, as later on, if one relooks at his/her document, the point behind using a particular element at a particular location becomes clear.
HTML Elements
HTML Headings
- HTML tag shop provides a total of six headings ( h1 to h6 ) for use at different locations in the page.
- Originally, the size decreases as we move from h1 to h6 but, the shape and size of headings can be changed later on according to user convenience.
HTML Forms
- <form> tag is used for generating a form like structure in the webpage.
Form Attributes
- "action" attribute contains the url of the location where the form is to be collected.
- "method" specifies the method of form submission either "post" or "get".
Form Elements:
a) <input> tag is used for making areas where the user can input the values to the browser.
- "type" attribute is used to specify the input type. ex- name, email, password, etc.
- Many times when we fill a form, say login or sign up type, we see that inside the input area ( where we are to fill name, email, etc ) some text like 'Enter your name' or 'email for ex- abc@gmail.com' is written, to provide additional info about the input field. "placeholder" attribute is used for that purpose.
- "required" is used when an input field is compulsory to be filled. A *mark comes above that input field area.
b) <select> tag is used when we want to put drop down to forms.
- <option> tag is used in <select> tag to put different options of drop down.
HTML Links
In almost every web page, for example say flipkart, one can notice the links there, some in the form of buttons (buy now, add to cart and so), some in the form of text or image or so, and upon clicking them, our page redirects us to any other page. This is done using HTML link.
- <a> tag is used for this purpose.
Attributes
- href="url of link" contains the url of the link that we want to attach.
- target="_blank" redirects us to new tab. Upon removing it, the new page loads in the same tab.
HTML Tables
- <table> tag is used for this purpose.
Table Elements
- <tr> tag is used to create rows in the table.
- <td> tag is to create columns.
Favicon
- To apply icon/logo to the tab.
Embedding different items to webpage:
- Embed Video
Syntax:
<video controls > <source src = "url" type = "video/mp4"> </video>
- Embed Audio
Syntax:
<audio controls > <source src = "url" type = "audio/mpeg"> </video>
- Embed pdf
Syntax:
<embed src = "url" type = "application/pdf">
If you have came this much far. Smile! As for now, you are at some position in HTML and you have been introduced by the concept of HTML. In further meets, we shall be discussing about the companion of HTML i. e. CSS and would be making beautiful websites. Till then, stay safe! Bye!!