WEB TECHNOLOGIES UNIT 1 What is HTML HTML is an acronym which stands for Hyper Text Markup Language. Let's see what is Hyper Text and what is Markup Language? Hyper Text: Hyper Text simply means "Text within Text". A text has a link within it, is a hypertext. Every time when you click on a word which brings you to a new webpage, you have clicked on a hypertext. Markup language: A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc. An HTML document is made of many HTML tags and each HTML tag contains different content. e.g <!DOCTYPE> <html> <body> <h1>Write Your First Heading</h1> <p>Write Your First Paragraph.</p> </body> </html> Description of HTML Example DOCTYPE: It defines the document type. html : Text between html tag describes the web document. body : Text between body tag describes the body content of the page that is visible to the end user. h1 : Text between h1 tag describes the heading of the webpage. p : Text between p tag describes the paragraph of the webpage. Features of HTML 1) It is a very easy and simple language. It can be easily understood and modified. 2) It is very easy to make effective presentation with HTML because it has a lot of formatting tags.
3) It is a markup language so it provides a flexible way to design web pages along with the text. 4) It facilitates programmers to add link on the web pages (by html anchor tag) , so it enhances the interest of browsing of the user. 5) It is platform-independent because it can be displayed on any platform like Windows, Linux and Macintosh etc. 6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it more attractive and interactive. HTML Tags HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags. When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties. Syntax <tag> content </tag> Unclosed HTML Tags Some HTML tags are not closed, for example br and hr. <br> Tag: br stands for break line, it breaks the line of the code. <hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage. HTML Meta Tags DOCTYPE, title, link and style HTML Text Tags <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>
HTML Link Tags <a> HTML Image <img>, <map> HTML List Tags <ul>, <ol>, <li>, <dl>, <dt> and <dd> HTML Table Tags table, tr, td, th. HTML Form Tags form, input, textarea, select, option, button, fieldset and legend HTML Scripting Tags script and noscript HTML Formatting HTML Formatting is a process of formatting text for better look and feel. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined. Following are the example of formatting tags. 1) Bold Text If you write anything within <b>............</b> element, is shown in bold letters. See this example: 1. <p> <b>Write Your First Paragraph in bold text.</b></p> Output: Write Your First Paragraph in bold text.
2) Italic Text If you write anything within <i>............</i> element, is shown in italic letters. See this example: 1. <p> <i>Write Your First Paragraph in italic text.</i></p> Output: Write Your First Paragraph in italic text. 3) HTML Marked formatting If you want to mark or highlight a text, you should write the content within <mark>.........</mark>. See this example: 1. <h2> I want to put a <mark> Mark</mark> on your face</h2> Output: I want to put a Mark on your face 4) Underlined Text If you write anything within <u>.........</u> element, is shown in underlined text. See this example: 1. <p> <u>Write Your First Paragraph in underlined text.</u></p> Output: Write Your First Paragraph in underlined text. 5) Strike Text Anything written within <strike>.......................</strike> element is displayed with strikethrough. It is a thin line which cross the statement. See this example: 1. <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>