> For the complete documentation index, see [llms.txt](https://serciiit.gitbook.io/introduction-to-software-systems/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://serciiit.gitbook.io/introduction-to-software-systems/web-technologies/html.md).

# HTML

This section contains few concepts related to HTML language and example files to explore the possibilities of HTML tags usage.

![ARPANET - Genesis of Internet](https://3903980405-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_kux1uuaXhHbpyCSYu%2F-MbeBOhRV8U4UvA5zh4u%2F-MbeBShKjiy307dG_ZP_%2Fimage.png?alt=media\&token=f9ca176c-e23a-4950-bd9d-5e47c5cc4686)

### Web Browser

 A web browser, or simply "browser," is an application used to access and view websites. Common web browsers include Microsoft Internet Explorer, Google Chrome, Mozilla Firefox, and Apple Safari. The primary function of a web browser is to render HTML, the code used to design or "mark up" webpages.

![Illustration on how a Website works!](https://3903980405-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_kux1uuaXhHbpyCSYu%2F-M_uDV-gp559t0gbigjR%2F-M_vB-Uzz8bCMzbOOsSM%2Fimage.png?alt=media\&token=3d4f2d7c-b354-4023-90d0-a3ae1ad0dc86)

When a user launches a Universal Resource Locator (URL) on a browser, it hits the respective domain web server and launches the web pages which are required by the user. The below image illustrates the workflow of the launch of the website.

![](https://3903980405-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_kux1uuaXhHbpyCSYu%2F-MbSL4790IAzUp03Y1-7%2F-MbSLGMM4vcAFBbiJ1Tu%2Fimage.png?alt=media\&token=640e49e5-7924-4207-bee6-ae52b97cee6d)

### HTML - HyperText Markup Language

* HyperText Markup Language -lingua franca for publishing hypertext
* A simple text format to create web pages 
* Specify structure, presentation and content of a web page
* Define tags \<html> \<head> \<body> ....etc
* Allow to embed other scripting languages to manipulate design layout, text and graphics
* Platform independent
* No special software required. They are by default part of Internet browser application like Chrome, IE, Safari, Mozilla FireFox
* The below image illustrates how a basic HTML code is reflected on a browser page

![Image illustrates a basic HTML code on a browser](https://3903980405-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_kux1uuaXhHbpyCSYu%2F-MbSM5wcjqejiKn6V2YK%2F-MbSMFy7p92-vKzfGaPr%2Fimage.png?alt=media\&token=066e08e4-e809-4c8e-a6c0-d5eff9d4d589)

* Consider headers carefully, it helps to identify your page
* The title of a Web page determines its ranking in certain search engines
* The title will also appear on Favorite lists, History lists, and Bookmark lists to identify your page
* HTML Contents include paragraph, headings, hyperlinks, images, media, lists, tables, form
* HTML Tags are considered as markup to specify the structure and style
* An opening tag and closing tag, Sometimes no closing tag Can have the attributes to specify extra info&#x20;
* HTML Validator: [http://validator.w3.org](http://validator.w3.org•Checks)
* Checks your HTML page for errors
* Like a compiler checks for errors in your program•Always write valid HTML pages even if the wrong HTML page “works”.

![Basic Strcuture of an HTML file](https://3903980405-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_kux1uuaXhHbpyCSYu%2F-MbSM5wcjqejiKn6V2YK%2F-MbSMPb7dOrxwaatLo2J%2Fimage.png?alt=media\&token=71a1ab54-8457-460b-90c1-dcf4e8725942)

### Managing Headings and Text in HTML

![Heading tags with degree of change in their size](https://3903980405-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_kux1uuaXhHbpyCSYu%2F-MbSN5sIjimNSHNy4cs5%2F-MbSNEgQynbocgiMx23T%2Fimage.png?alt=media\&token=da59484c-82ca-42a0-a0fd-a3e8917ea77d)

![Text formating in HTML](https://3903980405-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_kux1uuaXhHbpyCSYu%2F-MbSN5sIjimNSHNy4cs5%2F-MbSNNR2oo52YvRQw_Xi%2Fimage.png?alt=media\&token=d1413df4-7551-4aac-a679-77758dba0ba1)

### Lists in HTML (Ordered and Unordered)

![Unordered List in HTML](https://3903980405-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_kux1uuaXhHbpyCSYu%2F-MbSN5sIjimNSHNy4cs5%2F-MbSNU8_6SRm8_loUjsS%2Fimage.png?alt=media\&token=7f30e411-dce4-44ec-a93e-81c9dbe67eb6)

![Ordered List in HTML](https://3903980405-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_kux1uuaXhHbpyCSYu%2F-MbSN5sIjimNSHNy4cs5%2F-MbSN_B4OIe94UMH2iyn%2Fimage.png?alt=media\&token=761108de-e4a6-4228-a0b9-43bfc0d369c1)

### Hyperlinks in HTML

![Hyperlink to URL re-direction](https://3903980405-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_kux1uuaXhHbpyCSYu%2F-MbUtn91mDCfHKKCMuAD%2F-MbV8RCWZG6DQFdL-79G%2Fimage.png?alt=media\&token=3e62bc4f-7d34-4277-a5ec-969d02f1b825)

### Images in HTML

![Image tag in HTML](https://3903980405-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_kux1uuaXhHbpyCSYu%2F-MbUtn91mDCfHKKCMuAD%2F-MbV8XZO0DbH-3zNaw0x%2Fimage.png?alt=media\&token=e48744ed-2a07-4300-b5fd-10d775b39f6d)

### Tables in HTML

![Table in HTML](https://3903980405-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_kux1uuaXhHbpyCSYu%2F-MbUtn91mDCfHKKCMuAD%2F-MbV8dnSta_cRCKcS2tg%2Fimage.png?alt=media\&token=3ceb9866-5182-400e-aa42-140f12af7a14)

![Tables in HTML in detail](https://3903980405-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_kux1uuaXhHbpyCSYu%2F-MbUtn91mDCfHKKCMuAD%2F-MbV8jQR2ahmuUC9PrFc%2Fimage.png?alt=media\&token=a8c04ed3-87b8-4039-9721-f282333d7265)

### Additional Resources

1. Complete list of HTML tags - <https://html.com/tags/>
2. End to End HTML Guide by Mozilla Foundation - <https://developer.mozilla.org/en-US/docs/Web/HTML>
3. Use below attached Sample File to understand the above examples

{% file src="/files/-MbV9TI8acy7lqej3wAN" %}
SampleFile\_forHTML
{% endfile %}