Skip to content

Adding Html intro in html.md file in tech stacks #85

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Adding Html intro in html.md file in tech stacks #85

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d400372
Adding Html.md file for intro to html
Sargunan1213 Mar 22, 2023
42dc788
Update Html.md
Sargunan1213 Mar 22, 2023
d1e6337
Addressing comments
Sargunan1213 Mar 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
118 changes: 118 additions & 0 deletions Topics/Tech_Stacks/Html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
## What is Html?
HTML or hypertext markup language is a language used to create websites.
It consists of a series of elements that determine the structure of the webpage. We begin the file with the <html> tag and end with </html>.
The most important rule is that every opening tag has a corresponding closing tag. These only differ by a /.
Inside the html tag we have the <head> and <body> tags. The head tag contains all the meta information about the html page. The body tag consists of the elements to be displayed in the page. Heres a starter template for a html file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

## Some useful elements:
Inside the body tag is where all the elements displayed on the webpage are coded.

### Header tags:
Firstly we have the header tag. h1, h2, ..., h5 are used as headers for the document. The greater the number succeding h in the tag the smaller the title gets.

### Text tag:
In order to type a paragraph we use the p tag. Any text can to be displayed can be written in here.
If the text should be editable by the user then the <textarea> tag generates a box that the user can type in.
### Image:
In order to display an image we use the img tag. The source of the image is mapped to the attribute src. The attribute alt is used to display text in case the image fails to load. This text should ideally give a concise description of the image. For example, the below code generates the image found at "https://yourImageURL.com":

<img src="https://yourImageURL.com" alt="My sample image">
### Video:
Similarly in order to insert a video element in the webpage we use the <video> tag. Here we use a seperate <source> tag to provide the link to the video.
<video>
<source src="YourVideo.mp4" type="video/mp4">
</video>
### Table:
In order to display a table we use the table tag. Inside the table tags we use thead tag for the title row, the tbody tag for all the information rows and the tfoot tag for the concluding row. Inside each of these tags the tr tag is used to start a row and td for the column in it. The th tag is used for the header column inside the tr tags and td inside the <tr> tags in the tfoot section.

<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>element at row 1 column 1</td>
<td>element at row 1 column 2</td>
</tr>
<tr>
<td>element at row 2 column 1</td>
<td>element at row 2 column 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>footer column 1</td>
<td>footer column 2</td>
</tr>
</tfoot>
</table>
The resulting table is:
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>element at row 1 column 1</td>
<td>element at row 1 column 2</td>
</tr>
<tr>
<td>element at row 2 column 1</td>
<td>element at row 2 column 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>footer column 1</td>
<td>footer column 2</td>
</tr>
</tfoot>
</table>
### Links:
The a tag is used to provide links to external websites with the href attribute pointing to the desired webpage.
### Input:
The input tag is used to get information from the user. The type attribute in the tag determines the format of the input. Some types are text, time, date, image and email.
### Div:
The div tag creates a section in the document. An empty div tag will have size 0. The size of the tag can be manipulated in css or automatically takes the size of the contents in it.
### Lists:
The ul tag is used to create lists. Inside the ul we use li tags for each list element. For example:

<ul>
<li> List element 1</li>
<li> List element 2</li>
</ul>
## Usage of elements:
Elements can be nested within each other. For example a p may contain text, followed by a table and a list if needed. A p tag could contain another p tag in it as well! Elemnts will be rendered in the order in which they are coded. For example,


<p>
<h4> Title of Paragraph</h4>
This is a paragraph.
<ul>
<li> List element 1</li>
<li> List element 2</li>
</ul>
</p>
Here, li tags are nested within the ul tag which in itself is nested in in the p tag. A h4 tag is also nested in the p tag. We could nest images, videos and buttons in there as well.

## Styling:
In order to customise the look of elements html is combined with css to make the webpages look cleaner.