slides about html

2. Week 3 topic Names
 Preformat
 Special characters
 Html escape sequences
 Extra spaces
 Hex-dec & color basics
 Blink
 Marquee
 Font
 Superscripts and subscripts
 Tables
 Meta
 Frames
 Floating frames
 Adding forms to web page
 Menu select
 Text input element
 Password input element
 Text area input element
 Radio buttons
 Check boxes
 Submit and reset buttons
 Button

3. Week 3
Day One lecture
Preformat
Special characters
Html escape sequences
Extra spaces
Hex-dec & color basics
Blink
Marquee

4. Preformat
The HTML <pre> element defines preformatted text.
The text inside <pre> element is displayed in a fixed-width
font(usually Courier), and it preserves both spaces and line
breaks.

5. Special characters
 The HTML charset Attribute
 To display an HTML page correctly, a web browser must know the character
set used in the page.
 This is specified in the <meta> tag:
 <meta charset="UTF-8">
 From ASCII to UTF-8
 ASCII was the first character encoding standard. ASCII defined 128 different
characters that could be used on the internet: numbers (0-9), English letters
(A-Z),(a-b) and some special characters like ! $ + - ( ) @ < > .
 ISO-8859-1 was the default character set for HTML 4. This character set
supported 256 different character codes. HTML 4 also supported UTF-8.

6. Example of Special characters

7. Html escape sequences
 HTML escape sequences, also known as character entity references or HTML
entities, are special codes used to represent reserved characters or symbols
in HTML. These codes ensure that the reserved characters are displayed
correctly in the browser and do not interfere with the HTML structure.
 Reserved Characters: HTML uses certain characters for specific purposes,
such as `<`,`>`,`”` and `’` These characters have special meanings in
HTML, such as denoting tags, attributes, or entities. To use these characters
as regular text and prevent them from being interpreted as HTML code, we
need to escape them.
 Syntax: HTML escape sequences are written using the `&`(ampersand)
symbol, followed by a specific code or name, and then terminated with a
semicolon `;` For Example,`&lt;`represents the less-than symbol `<`, and
`&gt;`represents the greater-than symbol `>`.

8. Html escape sequences

9. Extra spaces
 Extra spaces in HTML refer to the additional whitespace characters, such as
spaces, tabs, or line breaks, that are present in the HTML code but do not
affect the visual layout of the webpage. These extra spaces can occur
between HTML tags, within the content of HTML elements, or even at the
beginning or end of the HTML document.
 In HTML, any sequence of whitespace characters is treated as a single space
when rendering the content in a web browser. This means that multiple
consecutive spaces or line breaks will be collapsed into a single space, and
the browser will ignore the extra spaces.
 <p>
 This is some text
 with extra spaces.
 </p>
 In this example, even though there are multiple spaces and line breaks within
<P> the element, the web browser will render it as
 "This is some text with extra spaces."

10. Extra spaces
 The extra spaces between "some" and "text," as well as between "with" and
"extra," are ignored.
 While the HTML specification may not explicitly discuss the topic of "extra
spaces," it provides guidelines for handling whitespace and defines how
whitespace should be treated in different contexts.
 However we handle this situation with <pre> tag. <pre> tag show output as it
is we write in it

11. HTML Colors
 There are different method to apply color on Elements Normally we use these
method. HTML colors are specified with predefined color names, or with RGB,
HEX, HSL, RGBA, or HSLA values

12. All method to apply colors in Html

13. Hex-dec & color basics
 A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG
(green) and BB (blue) hexadecimal integers specify the components of the
color
 hexadecimal values between 00 and ff (same as decimal 0-255)
 For example, #ff0000 is displayed as red, because red is set to its highest
value (ff), and the other two (green and blue) are set to 00

14. Example of Hec-dec

15. Blink
 The <blink> HTML tag is used to enclose text to create a blinking effect.
 In HTML, the "blink" property does not exist. It seems you may be referring to
the<blink> element, which was deprecated and removed from the HTML
standard.
 The <blink> element was used to make text or other content on a webpage
flash on and off. However, it was widely considered to be distracting and
negatively impacted user experience. As a result, it was removed from the
HTML specification.
 If you want to achieve a similar effect of blinking text, you can use CSS
animations or JavaScript to create dynamic and animated content on your
webpage. Here's an example of how you can achieve a blinking effect using
CSS animation

16. CSS animation
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 @keyframes blink {
 0% { opacity: 1; }
 50% { opacity: 0; }
 100% { opacity: 1; }
 }
 .blink {
 animation: blink 1s infinite;
 }
 </style>
 </head>
 <body>
 <p class="blink">This text will blink</p>
 </body>
 </html>

17. Marquee
 The <marquee> tag is a container tag of HTML is implemented for creating
scrollable text or images within a web page from either left to right or vice versa,
or top to bottom or vice versa. But this tag has been deprecated in the new
version of HTML, i.e., HTML 5.
 Instead, it is recommended to achieve similar effects using CSS animations or
JavaScript.
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 .marquee {
 width: 100%;
 white-space: nowrap;
 overflow: hidden;
 animation: marquee 5s linear infinite;

18.  }

 @keyframes marquee {
 0% { transform: translateX(100%); }
 100% { transform: translateX(-100%); }
 }
 </style>
 </head>
 <body>
 <div class="marquee">
 <p>This text will scroll horizontally</p>
 </div>
 </body>
 </html>

20. Week 3
Day 2 topics
 Font
 Superscripts and subscripts
 Meta
 Frames
 Floating frames

21. Font
 The` <font>`tag in HTML was used to specify the font face, size, and color of
text. However, the <font>` tag has been deprecated and is no longer
recommended for use in modern HTML. It is considered outdated and has
been replaced by CSS for styling and formatting purposes.
 In modern HTML, you should use CSS to define the font properties. The CSS
`font-family`property is used to specify the font face, the` font-size`
property is used to set the font size, and the`color` property is used to
define the font color.

22. Font css Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 .my-text {
 font-family: Arial, sans-serif;
 font-size: 16px;
 color: #333333;
 }
 </style>
 </head>
 <body>
 <p class="my-text">This is a sample text.</p>
 </body>
 </html>

23. HTML <sup> Element
 The HTML <sup> element defines superscript text. Superscript text
appears half a character above the normal line, and is sometimes
rendered in a smaller font. Superscript text can be used for footnotes
like WWW[1]:

24. HTML <sub> Element
 The HTML <sub> element defines subscript text. Subscript text appears half a
character below the normal line, and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H2O:

25. Meta
 In HTML, the <meta> tag is used to provide metadata or additional information
about an HTML document. Metadata describes various aspects of the document,
such as its title, author, character encoding, keywords, and description.
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <meta name="description" content="This is an example HTML document.">
 <meta name="keywords" content="HTML, metadata, example">
 <meta name="author" content="John Doe">
 <title>Example HTML Document</title>
 </head>
 <body>
 <!-- Content of the HTML document goes here -->
 </body>
 </html>

26. Meta
 In the above example, the <meta> tags are used to specify the character
encoding of the document (UTF-8), provide a description and keywords for
search engines, and indicate the author of the document. The <title> tag sets
the title of the HTML document, which appears in the browser's title bar or
tab.

27. HTML Iframes
 An iframe is used to display a web page within a web page.
 Iframe Syntax
 An HTML iframe is defined with the <iframe> tag:
 <iframe src="URL"></iframe>
 The src attribute specifies the URL (web address) of the inline frame page.
 Iframe - Set Height and Width
 Use the height and width attributes to specify the size of the iframe.The
attribute values are specified in pixels by default, but they can also be in
percent (like "80%").
 Example
 <iframe src="demo_iframe.htm" height="200" width="300"></iframe>

28. Iframe
 Iframe - Remove the Border
 By default, an iframe has a border around it . To remove the border, add
the style attribute and use the CSS border property:
 Example
 <iframe src="demo_iframe.htm" style="border:none;"></iframe>
 With CSS, you can also change the size, style and color of the iframe's border:
 Example
 <iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>
 Iframe - Target for a Link
 An iframe can be used as the target frame for a link.The target attribute of the
link must refer to the name attribute of the iframe:
 Example
 <iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></
p>

29. HTML iframe Tag
Tag Description
<iframe> Defines an inline frame

30. Floating Frames
 Floating frames, also known as floating iframes, were a deprecated feature in
HTML that allowed developers to create floating or draggable frames on a
web page. However, this feature is no longer supported in modern web
development.
 Instead of floating frames, you can achieve similar effects using modern CSS
and JavaScript techniques. For example, you can use CSS positioning
properties (such as position :fixed or position : absolute) to create floating
elements on a page. JavaScript libraries like jQuery UI or custom JavaScript
code can be used to implement draggable and resizable behavior.
 Here's an example of creating a floating element using CSS and JavaScript:
 HTML
 <div id="floating-element">
 <!-- Content of the floating element -->
 </div>

31. Example
 Css
 #floating-element {
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 300px;
 height: 200px;
 background-color: #f1f1f1;
 }
 JavaScript (with jQuery UI library):
 $(function() {
 $("#floating-element").draggable();
 });

32.  In this example, the CSS position; fixed property is used to position the
element relative to the viewport. The top,left and transform properties are
used to center the element on the screen. The JavaScript code uses the jQuery
UI library's draggeble() function to make the element draggable.

33. Table
Defining an HTML Table
An HTML table is defined with the <table> tag. Each table row
is defined with the <tr> tag. A table header is defined with
the <th> tag. By default, table headings are bold and centered.
A table data/cell is defined with the <td> tag.

34. Example
 <table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
 Note
 table, th, td {
border: 1px solid black;
 Note: The <td> elements are the
data containers of the table.
They can contain all sorts of HTML
elements; text, images, lists, other
tables, etc.
 HTML Table - Adding a Border
 If you do not specify a border for the
table, it will be displayed without
borders. A border is set using the
CSS border property:
 Remember to define borders for both
the table and the table cells.

35. HTML Table - Collapsed Borders
If you want the borders to collapse into one border, add the CSS border-
collapse property:
 table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
 HTML Table - Adding Cell Padding
 Cell padding specifies the space between the cell content and its borders.If
you do not specify a padding, the table cells will be displayed without
padding
 To set the padding, use the CSS padding property:
 th, td {
padding: 15px;
}

36. HTML Table - Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
 <table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
 HTML Table - Cells that Span Many Rows
 To make a cell span more than one row, use the rowspan attribute:
 <table style="width:100%">
<tr>

37. HTML Table - Cells that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
 <table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

38. HTML Table - Adding a Caption
To add a caption to a table, use the <caption> tag:
 <table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
 Note: The <caption> tag must be inserted immediately after the <table> tag

39. A Special Style for One Table
To define a special style for a special table, add an id attribute to the
table:
Example
 <table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
 table#t01 {
width: 100%;
background-color: #f1f1c1;
}
 table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}

40. Table Topic Summary
 Use the HTML <table> element to define a table
 Use the HTML <tr> element to define a table row
 Use the HTML <td> element to define a table data
 Use the HTML <th> element to define a table heading
 Use the HTML <caption> element to define a table caption
 Use the CSS border property to define a border
 Use the CSS border-collapse property to collapse cell borders
 Use the CSS padding property to add padding to cells
 Use the CSS text-align property to align cell text
 Use the CSS border-spacing property to set the spacing between cells
 Use the colspan attribute to make a cell span many columns
 Use the rowspan attribute to make a cell span many rows
 Use the id attribute to uniquely define one table

41. Adding forms to web page
 HTML Forms are required, when you want to collect some data from the site
visitor. For example, during user registration you would like to collect
information such as name, email address, credit card, etc.
 A form will take input from the site visitor and then will post it to a back-end
application such as PHP script etc. The back-end application will perform
required processing on the passed data based on defined business logic inside
the application.
 There are various form elements available like text fields, textarea fields,
drop-down menus, radio buttons, checkboxes, etc.
 The HTML <form> tag is used to create an HTML form and it has following
syntax
<form action="Script URL" method="GET|POST">

42. Form Attributes
Attribute Description
action Backend script ready to process your passed data.
method Method to be used to upload data. The most
frequently used are GET and POST methods.
target Specify the target window or frame where the
result of the script will be displayed. It takes
values like _blank, _self, _parent etc.
enctype You can use the enctype attribute to specify how
the browser encodes the data before it sends it to
the server. Possible values are:
application/x-www-form-urlencoded - This is
the standard method most forms use in simple
scenarios.
mutlipart/form-data - This is used when you want
to upload binary data in the form of files like
image, word file etc.

43. HTML Form Controls
 There are different types of form controls that you can use to collect data
using HTML form:
 Text Input Controls
 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button

44. Text Input
 There are three types of text input used on forms:
 Single-line text input controls - This control is used for items that require only
one line of user input, such as search boxes or names. They are created using
HTML <input> tag.
 Password input controls - This is also a single-line text input but it masks the
character as soon as a user enters it. They are also created using HTMl
<input> tag.
 Multi-line text input controls - This is used when the user is required to give
details that may be longer than a single sentence. Multi-line input controls
are created using HTML <textarea> tag.

45. Text input Element
 This control is used for items that require only one line of user input. They
are created using HTML <input> tag.
 <body>
 <form>
 First name:
 <input type="text" name="first_name" />
 <br>
 Last name:
 <input type="text" name="last_name" />
 </form>
 </body>

46. Attributes
Following is the list of attributes for <input> tag
for creating text field
Attribute Description
type Indicates the type of input control and for text input control it will be
set totext.
name Used to give a name to the control which is sent to the server to be
recognized and get the value.
value This can be used to provide an initial value inside the control.
•.
size Allows to specify the width of the text-input control in terms of
characters.
maxlength Allows to specify the maximum number of characters a user can enter
into the text box.

47. Password input element
 This is also a single-line text input but it masks the character as soon as a
user enters it. They are also created using HTML <input> tag but type
attribute is set to password
<body>
<form>
User ID :
<input type="text" name="user_id" />
<br/>
Password:
<input type="password" name="password" />
</form>
</body>

48. Multiple-Line/Text area Input Element
 This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.
 Example
 <!DOCTYPE html>
 <html>
 <head>
 <title>Multiple-Line Input Control</title>
 </head>
 <body>
 <form>
 Description:
 <br />
 <textarea rows="5" cols="50" name="description"> Enter description here...
 </textarea>
 </form>
 </body>
 </html>

49. Radio buttons
 Radio buttons are used when out of many options, just one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to radio.
 Example
 <!DOCTYPE html>
 <html>
 <head>
 <title>Radio Box Control</title>
 </head>
 <body>
 <form>
 <input type="radio" name="subject" value="maths">
 Maths
 <input type="radio" name="subject" value="physics">
 Physics
 </form>
 </body>

50. Attributes
Following is the list of attributes for radio button
Attribute Description
type Indicates the type of input control and for checkbox input control it will be set to radio.
name Used to give a name to the control which is sent to the server to be recognized and get the
value.
value The value that will be used if the radio box is selected.
checked Set to checked if you want to select it by default.
.

51. Checkbox
 Checkboxes are used when more than one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to checkbox. Example
 <!DOCTYPE html>
 <html>
 <head>
 <title>Checkbox Control</title>
 </head>
 <body>
 <form>
 <input type="checkbox" name="maths" value="on">
 Maths
 <input type="checkbox" name="physics" value="on">
 Physics
 </form>
 </body>
 </html>

52. Attributes
Attributes Following is the list of attributes for <checkbox> tag.
Attribute Description
type Indicates the type of input control and for checkbox input control it will be set to
checkbox.
name Used to give a name to the control which is sent to the server to be recognized and
get the value.
value The value that will be used if the checkbox is selected.
checked Set to checked if you want to select it by default.

53. Button/ Submit and reset buttons
 There are various ways in HTML to create clickable buttons. You can also create a clickable
button using <input> tag by setting its type attribute to button.There are three type of
button
 <!DOCTYPE html>
 <html>
 <head>
 <title>File Upload Box</title>
 </head>
 <body>
 <form>
 <input type="submit" name="submit" value="Submit" />
 <input type="reset" name="reset" value="Reset" />
 <input type="button" name="ok" value="OK" />
 <input type="image" name="imagebutton" src="logo.png" width="100" height="100"/>
 </form>
 </body>
 </html>

54. Description
Type Description
submit This creates a button that automatically submits a form.
reset This creates a button that automatically resets form controls to their initial values.
button This creates a button that is used to trigger a client-side script when the user clicks that button.
image This creates a clickable button but we can use an image as background of the button.