Web Designing using HTML

Hello students, welcome to Kwickprep. Every website you open, from your school site to a train booking page, starts with simple text. How does plain text become a web page? Today we will learn HTML, its structure, and the tags for text, lists, links, images and tables.

Let us start with the name. HTML stands for HyperText Markup Language. Markup means we add tags around content, and the browser uses them to display it. Hypertext means text that contains links to other pages. An HTML file is plain text, saved with the extension dot html.

You do not need costly software to write HTML. You need a text editor, such as Notepad, to type the code. You need a web browser, such as Chrome or Firefox, to see the page. Save the file, open it in the browser, and refresh after every change.

Now four words you must know. A tag is a name written inside angle brackets, like p for paragraph. Most tags come in pairs, and the closing tag has a slash. An element is the opening tag, the content and the closing tag together. An attribute gives extra detail inside the opening tag, like align equals center.

Every HTML page has the same skeleton. The first line, DOCTYPE html, tells the browser this page is HTML5. The html tag wraps the whole page. The head holds information about the page, like the title. The title appears on the browser tab, not on the page. The body holds everything that is shown on the screen. So the paragraph Welcome students appears in the browser window.

Tags are of two types. A container tag has an opening tag and a closing tag, with content in between. For example, b makes the text between its tags bold. An empty tag has no closing tag and holds no content. The br tag breaks a line, and hr draws a horizontal line across the page.

HTML has six heading levels, from h1 to h6. H1 is the biggest and most important, and h6 is the smallest. The p tag makes a paragraph, with space before and after it. Inside a paragraph, b makes text bold and i makes text italic. The u tag underlines text.

Lists keep information neat. An ordered list uses the ol tag and numbers each item. An unordered list uses the ul tag and shows bullets. Each item inside either list goes in an li tag. A definition list uses dl, with dt for the term and dd for its meaning.

Here is a timetable list. The type attribute changes the numbering, so type equals capital A shows A and B. A plain unordered list gives round bullets, and the bullet shape is changed with CSS today. Pause and predict. If type is small i, what marks appear? Small Roman numerals, one and two.

Links make hypertext work. The a tag, called the anchor tag, creates a link. The href attribute gives the address to open. The text between the tags is what the reader clicks. The first link opens another page of the same site, and the second opens the NCERT website.

The img tag adds a picture, and it is an empty tag. The src attribute names the image file, here school dot jpg. The alt attribute gives text shown if the image cannot load, and it helps blind users. Width and height set the size in pixels.

Tables show data in rows and columns, like a marks list. The table tag wraps the table, and border equals one draws the lines. Each tr tag is a table row. The th tag is a heading cell, shown bold and centred. The td tag is a normal data cell.

A few attributes change how a table looks. Border sets the thickness of the lines. Cellpadding adds space between the text and the cell edge. Colspan makes one cell stretch across two or more columns. Rowspan makes one cell stretch down two or more rows.

Good web design is more than correct tags. Use headings in order, starting from h1, so the page structure is clear. Give every image alt text so everyone can understand it. Keep the text easy to read, with dark text on a light background. Finally, test the page in more than one browser and on a mobile.

Let us revise what we learned today. HTML is a markup language that tells the browser how to show content. Every page has html, head, title and body. Container tags have closing tags, but empty tags like br do not. Lists use ol, ul and li, links use a with href, and images use img with src. Tables are built with table, tr, th and td.