HTML (WT) Lecture Notes PDF

# Introduction to HTML HTML stands for Hyper Text Markup Language. - HTML is a markup language that provides a set of tags suitable for making web pages. - It is a scripting language for web pages; the output of programs can be seen after using a browser. - HTML is a hypertext language because it supports font styled text, pictures, graphics, and animations. - The HTML documents are plain text files, created using text editors like Notepad. - HTML is a tag-based system. A tag is a special instruction for the browser. - A tag is made up of a left operator (<) and a right operator (>) with a tag name between them. - The tag name can optionally contain one or more parameters. - The browser won’t generate any error if there are no parameters. ### Syntax: `<tagname [parameter = value]>` ### Example: ```html <p align="center"> ``` - The tagname is enclosed between the left and right operator. ### Note: - Don't give any space between the left operator and the tag name. - In HTML, every tag can have a corresponding end tag preceded by the backslash symbol. # Structure of HTML Document All HTML documents follow the same basic structure. - It has two blocks: head block and body block. ### Head Block The head block contains control information used by the browser and the title of the document. ### Body Block The body block contains the content that displays on the screen and tags, which control how the content is formatted by the browser. ### Basic HTML Document ```html <html> <head> <title>A HTML document</title> </head> <body> </body> </html> ``` - In an HTML document, every tag can have a corresponding end tag preceded by the backslash symbol (/). ### Example: ```html <html> </html> ``` # Basic HTML Tags ### `</html>` & `</html>` This is the basic tag of an HTML document. The browser uses this tag to identify whether the document is an HTML document or not. ### `<head>` & `</head>` This tag indicates the first part of an HTML document and contains control information and the title of the HTML document. ### `<title>` & `</title>` It specifies the title of the HTML document. ### `<body>` & `</body>` It indicates the second part of the HTML document and contains all the remaining information about the web page. The body tag has different parameters, including the background, background color, etc. ### Blocks The two major blocks of text in an HTML document are paragraphs and headings. #### `<p>` & `</p>` The `p` tag specifies the paragraph. #### `<p align = "left", "center", "right"]>` This tag specifies how the paragraph is aligned. #### Heading Tags Heading tags are simple forms of text formatting that vary text size based on the header level. - `<h1>` & `</h1>` - `<h2>` & `</h2>` - `<h3>` & `</h3>` - `<h4>` & `</h4>` - `<h5>` & `</h5>` - `<h6>` & `</h6>` # Example ```html <html> <head> <title>My first document</title> </head> <body bgcolor="Skyblue"> <P>This document displays the title of the document and different text headings</p> <h1>Web Technologies</h1> <h2>Web Technologies</h2> <h3>Web Technologies</h3> <h4>Web Technologies</h4> <h5>Web Technologies</h5> <h6>Web Technologies</h6> </body> </html> ``` # Text You can alter the text on HTML pages in a number of ways: - `<font size = "[+/-n]" color="#rrggbb"> ... </font>` This tag allows you to set the size and color of the text. - `<b>` & `</b>` This tag bolds the text. - `<u>` & `</u>` This tag underlines the text. - `<i>` & `</i>` This tag italicizes the text. - `<em>` & `</em>` This tag is the new standard for italic text. - `<strong>` & `</strong>` This tag is the new standard for bold text. - `<s>` & `</s>` This tag strikes through the text. # Example ```html <html> <head> <title>Text</title> </head> <body> <h1>Changing font sizes</h1> <font size="7"> Larger: </font> <font size="3"> Medium: </font> <font color="red"> Red: </font> <font color="blue"> Blue: </font> <b><u><i> Text styles </i></u></b> <b>Web Technologies</b> <u>Web Technologies</u> <i>Web Technologies</i> <em>Web Technologies</em> <strong>Web Technologies</strong> <s>Web Technologies</s> </body> </html> ``` # Horizontal Rule (`<hr>`) The `hr` tag creates a horizontal rule within the HTML document. `<hr [width=n] [size=n] [align = {left/Right/ Center} [Noshade]] />` # Subscripts & Super Scripts - `<sub>...</sub>` - Subscripts - `<sup>...</sup>` - Superscripts # Example ```html <html> <body> <b>Formula for water</b> <hr/> H<sub>2</sub>O <br/> <b>Basic Mathematical Formula</b> <hr/> (a+b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + 2*a*b. </body> </html> ``` # Character Escape Sequences - `&` - Ampersand - ` ` - Non-breaking space - `<` - Less than - `>` - Greater than - `"` - Quotation marks - `©` - Copyright symbol # Anchor Tag (`<a>`) The anchor tag creates a link between two documents. It requires the `href` parameter, which indicates the destination document. - `<a href="address"> Text </a>` # Example **welcome.html** ```html <html> <head> <title>Welcome</title> </head> <body> <h1>Welcome to HTML</h1> </body> </html> ``` **home.html** ```html <html> <head> <title>Home</title> </head> <body> <a href="welcome.html">click here</a> </body> </html> ``` # Lists A list is a collection of items, and they may be ordered or unordered. HTML provides three types of lists: - **Ordered List** ```html <ol> </ol> ``` - **Unordered List** ```html <ul> </ul> ``` - **Definition List** ```html <dl> </dl> ``` ## Ordered List The ordered list is used to display the list of items in order using numbers or alphabets. It has a "type" attribute that can be set to use Roman numbers or upper or lower case alphabetics. The default value is "1". ### Example ```html <ol> <li>orange</li> <li>mango</li> <li>grape</li> </ol> ``` This code would display the list with numbers 1, 2, 3 next to each list item. ```html <ol type='A'> <li>orange</li> <li>mango</li> <li>grape</li> </ol> ``` This code would display the list with upper case letters A, B, C next to each list item. ```html <ol type='I' start='3'> <li>cricket</li> <li>football</li> </ol> ``` This example would display the list with roman numerals starting at 3, III, IV. ## Unordered List The unordered list is used to display the list of items by using different types of symbols. The unordered list has a "type" attribute that can be set to "disc", "circle", or "square," which specifies what symbol to use. The default is "disc". ### Example ```html <ul> <li>orange</li> <li>apple</li> </ul> ``` This would display a list with bullets next to each list item. ```html <ul type="circle"> <li>cricket</li> <li>football</li> </ul> ``` This would display a list with circles next to each list item. ## Definition List The definition list is used to specify a list of terms and their definitions. It has three tags: - `<dl>`: Specifies the definition list. - `<dt>`:Specifies the defined term. - `<dd>`: Specifies the definition for the term. ### Example ```html <dl> <dt>HTML</dt> <dd>HTML is the markup language</dd> <dt>XML</dt> <dd>XML is the extended markup language</dd> </dl> ``` # Example ```html <html> <head> <title>List of subjects</title> </head> <body> <h2>Unordered list</h2> <ul> <li>WT</li> <li>CD</li> </ul> <ul type = "square"> <li>OOAD</li> <li>NS</li> </ul> <h2>Ordered list</h2> <ol> <li>WT</li> <li>CD</li> </ol> <ol type = "A"> <li>OOAD</li> <li>NS</li> </ol> <h2>Definition list</h2> <dl> <dt>WT</dt> <dd>WT stands for Web Technology</dd> <dt>CD</dt> <dd>CD Stands for compiler design</dd> </dl> </body> </html> ``` # Tables - A table is represented as a matrix of rows and columns. - It provides an easy way to present data in a readable, structured way. - You can use tables to present data and organize information on web pages. - The basic table tags are: ### `<table>` & `</table>` The opening and closing tags `<table>` and `</table>` are used to define the beginning and end of the table. ### `<th>` & `</th>` The `<th>` tag is used for table headings (column headers). The content in `<th>` tags is typically displayed bold and centered, giving a clear visual hierarchy to the table. ### `<tr>` & `</tr>` The `<tr>` table tag is used to define each row of a table. ### `<td>` & `</td>` The `<td>` tag identifies each cell within a row. ### `<caption>` & `</caption>` The `<caption>` tag is used to add a caption to a table, describing the table’s contents. It is best practice to put the tag immediately after the `<table>` tag to ensure the caption appears correctly within the table. ### Table Format `<table align="center" / "left" / "right"] [border=n] [cellpadding=n] [height = n%] [width=n%] [cellspacing = n] >` - `align`: Aligns the table (possible values: "center", "left", "right"). - `border`: Sets the border width in pixels. - `cellpadding`: Sets the space between the cell border and the cell contents. - `cellspacing`: Sets the space between cells. - `height`: Sets the height of the table. - `width`: Sets the width of the table. ### Example ```html <html> <head> <title>Table</title> </head> <body> <table border = 1> <caption>employee details</caption> <tr> <th>EID</th> <th>ENAME</th> <th>SALARY</th> </tr> <tr> <td>101</td> <td>Madhu</td> <td>1000</td> </tr> <tr> <td>102</td> <td>Giridhar</td> <td>2000</td> </tr> <tr> <td>103</td> <td>Satish</td> <td>3000</td> </tr> </table> </body> </html> ``` - `cellpadding`: It specifies the space between the content of a cell and its border, measured in pixels. - `cellspacing`: It specifies the space between cells, measured in pixels. - `width`: This attribute sets the amount of screen space, in percentage, that the table will occupy. - `height`: This attribute sets the amount of screen space, in percentage, that the table will occupy. # Images Images play an important role in web pages. The overall look of a web page is improved using images. - `<img>` The `<img>` tag is used to embed images inside an HTML document. It requires the `src` attribute to specify the source of the image. ### `<img src = "filename/path" [Border=n} [Alt="lext"] [height = n] [width=n]>` - `"filename/path"`: This attribute indicates the source of the image. - `"Border"`: This attribute sets the border width around the image. - `"Alt"`: The `Alt`, or alternate text, attribute is crucial for accessibility. It provides a textual alternative to the image, which can be helpful if the image doesn't load or users have visual impairments. - `"height"`: Sets the height of the image. - `"width"`: Sets the width of the image. - **Hyperlinks** Sometimes, you can use images as hyperlinks. The `href` attribute is used to specify the URL that the user will be directed to when clicking the image. ### Example: ```html <a href="a.html"> <img src=""/></a> ``` # Example ```html <html> <head> <title>Images</title> </head> <body> <h1>Sample images</h1> <p>This example: displays the images</p> <img src="winter.jpeg" alt="Winter" /> <br/> <img src="sunrise.jpeg" width=20% height=10% alt= "sunrise"/> </body> </html> ``` # Forms A form is the most common way for a user to communicate information from a browser to a server. The `<form>` tag is used to create a HTML form. This tag has several attributes, but two of the most important are "method" and "action." ### `action` This attribute specifies the URL of the application that will handle the form data when the user submits the form. The application is usually a server-side script like a PHP script or a Node.js script that processes the data and performs certain actions. ### `method` This attribute specifies how the information from the form will be sent to the server. There are two common methods: 1. **`GET` Method:** - Information sent along with the URL. - Data is visible in the site address. - No security concerns, as data is visible in the URL. - Limited with the number of characters that it can send. 2. **`POST` Method:** - Information sent along with the body. - Data is invisible while sending. - Provides security, as the data is not visible to others. - Can send any number of characters. ## User Interface Elements in Forms ### Label: - Displays the text on the screen for the form's input fields. - Helps users understand the purpose and context of each input field. ### Text Field: - A rectangular box that allows users to enter text. - Used to capture user input in the form. ### Buttons There are three main types of buttons used in HTML forms: 1. **Button:** This creates a simple button. ```html <input type="button" value=" "> ``` 2. **Submit:** - Creates a button that triggers form submission. - Invokes the form action. - Sends the data entered in the form to the server for processing. ```html <input type="submit" value=" "> ``` 3. **Reset:** - Creates a button that resets the form to its default state. - Clears all the data entered in the form. - Resets all the values from the form to their original state. ```html <input type="Reset" value=" "> ``` ### Password Field - Used for entering sensitive information that must be kept private, such as passwords. - The input characters are usually masked with asterisks. ```html <input type="password" size=" " name=" "> ``` ### Radio Button - Used to select only one option out of multiple choices. - The `name` attribute must be the same for all the radio button options within the same group (e.g., "choice") so that only one option can be selected at a time. ```html <input type="radio" name=" " value=" "> ``` ### Check Box - Used to select multiple options out of a set of choices. - The `name` attribute is usually the same across all the checkboxes in a group if you want to send a single piece of information about the selections. ```html <input type="checkbox" name=" " value=" "> ``` ### Combo Box - Allows users to make a selection from a dropdown menu. - Often used to present a list of options for the user to pick. ```html <select name=" "> <option>...</option> <option>...</option> </select> ``` ### List Box - Allows the selection of multiple values from a list. - Used for situations where the users can need to choose one or more items from a list of options. ```html <select name=" " size=" "> <option selected>...</option> <option>...</option> </select> ``` ### Text Area - Offers a larger space for input than a regular text field. - Used for capturing a large amount of text, such as comments or messages. ```html <textarea name=" " rows=" " cols=" "></textarea> ``` # Example ```html <html> <head> <title>Registration Form</title> </head> <body bgcolor="skyblue"> <form name="frmi"> <center><h2>Registration Form</h2></center> <table align="center" border="1"> <tr> <td>Student No:</td> <td><input type="text" name="sno"><input></td> </tr> <tr> <td>Name:</td> <td><input type="text" name="name"><input></td> </tr> <tr> <td>Gender:</td> <td><input type="radio" name="gen"> Male <input> &nbsp <input type="radio" name="gen"> Female <input> </td> </tr> <tr> <td>password:</td> <td><input type="password" name="pwd"></input> </td> </tr> <tr> <td>Branch:</td> <td><select name="branch"> <option>--SELECT--</option> <option>CSE</option> <option>ECE</option> <option>EEE</option> <option>MECH</option> </td> </tr> <tr> <td>Hobbies</td> <td><input type="checkbox" name="hb"> Playing cricket <input> &nbsp <input type="checkbox" name="hb"> Reading books <input></td> </tr> <tr> <td>Address:</td> <td><textarea name="addrs" rows="4" cols="15"> </textarea></td> </tr> <tr> <td><input type="submit" name="subm" value="submit" </input></td> <td><input type="Reset" name="r" value="Reset" </input> </td> </tr> </table> </body> </html> ``` # Example: ```html <html> <head> <title>Login</title> </head> <body> <center><h2>Login</h2></center> <br/> <table align="center"> <tr> <td>username:</td> <td><input type="text"></input></td> </tr> <tr> <td>password</td> <td><input type="password"></input></td> </tr> <tr> <td colspan="2" align="center"> <input type="button" value="Login"></input> </td> </tr> </table> </body> </html> ``` # Frames - The browser window can be used to display several documents at once. - This window can be divided into rectangular areas, which are called frames. - The `frameset` tag specifies the number and layout of frames. - It defines a group of frames and determines how they are organized across the browser window. - It replaces the `<body>` tag. - HTML documents can have one or the other, but not both. - `<frameset [cols = "%, %"] [rows = "%, %."] > </frameset>` - `cols`: The `cols` attribute defines the columns of the frames, dividing the window horizontally. - `rows`: The `rows` attribute defines the rows of the frames, dividing the window vertically. - `<frame Src = "filename" (name = ""] [Serolling: "yes"auto" 1"no") [frameborder = "0"/"1"] />` - `src`: The `src` attribute defines the source of the frame. - `name`: The `name` attribute assigns a name to each frame, allowing for easy referencing. - `scrolling`: The `scrolling` attribute controls whether the frame content should be allowed to scroll. - `frameborder`: The `frameborder` attribute controls the visibility of the frame border. # Example ```html <html> <head> <title>Frames</title> </head> <frameset cols="25%, 50%"> <frame name="Login" src="login.html" /> <frame name="Registration" src="Registration.html" /> </frameset> </html> ``` # Nested Frames - Inside a frame, you can create another frame using nested frames. - The `frameset` tag can be nested within another `frameset` tag, leading to a more complex layout of multiple frames within frames. # Example ```html <html> <head> <title>Nested Frames</title> </head> <frameset rows="25%, 50%"> <frame name="login" src="login.html" /> <frameset cols="25%, 75%"> <frame name="welcome" src="welcome.html" /> <frame name="Registration" src="Registration.html" /> </frameset> </frameset> </html> ```

HTML (WT) Lecture Notes PDF

Document Details

Tags

Related

Summary

Full Transcript

Upgrade to continue