2. HTML Basic unit2 fundamentals of computer
travelwithlifezindgi
21 views
65 slides
Oct 05, 2024
Slide 1 of 65
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
About This Presentation
html
Slide Content
HTML Basics
HTML HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTML elements tell the browser how to display the content HTML Basics
HTML ELEMENT An HTML element is defined by a start tag, some content, and an end tag: < tagname > Content goes here... </ tagname > The HTML element is everything from the start tag to the end tag: <h1>My First Heading</h1> <p>My first paragraph.</p> HTML Basics
HTML Basics
Some HTML elements have no content (like the < br > element). These elements are called empty elements. Empty elements do not have an end tag. HTML Basics
HTML PAGE STRUCTURE HTML Basics
<!DOCTYPE html>: This is the document type declaration (not technically a tag). It declares a document as being an HTML document. The doctype declaration is not case-sensitive. <html>: This is called the HTML root element. All other elements are contained within it. <head>: The head tag contains the “behind the scenes” elements for a webpage. Elements within the head aren’t visible on the front-end of a webpage HTML Basics
HTML elements used inside the <head> element include: < style> -This html tag allows us to insert styling into our webpages and make them appealing to look at with the help of CSS. < title> -The title is what is displayed on the top of your browser when you visit a website and contains title of the webpage that you are viewing. < base > - It specifies the base URL for all relative URL’s in a document. < noscript > – Defines a section of HTML that is inserted when the scripting has been turned off in the users browser. < script> -This tag is used to add functionality in the website with the help of JavaScript. < link> – The ‘link’ tag is used to tie together HTML, CSS and JavaScript. HTML Basics
< body>: The body tag is used to enclose all the visible content of a webpage. In other words, the body content is what the browser will show on the front-end. An HTML document can be created using any text editor. Save the text file using .html or . htm . Once saved as an HTML document, the file can be opened as a webpage in the browser. HTML Basics
HTML TAGS The things wrapped in triangular braces (the < … > characters) are called tags . There are both opening tags and closing tags (or starting tags and ending tags ) which come in pairs to enclose pieces of content. HTML Basics
There are two types of tags in HTML that are: Paired Tags (Opening and Closing Tags) Unpaired Tags (Singular Tag) HTML Basics
Paired Tags - Opening and Closing Tags Paired tags are a set of two tags with the same name. In each Paired tag set, one is an opening tag, and the other one is the closing tag. The closing tag has a / slash, it means that the tag is closed now. It is necessary to close a paired tag; otherwise, it can result in the malfunctioning of the website. <tag> Content </tag> HTML Basics
Unpaired Tags - Singular Tags Unpaired tags are single tags with no closing tag. These tags are also called Singular Tags . These are also called non-container tags because they do not contain any content. It is recommended to close the unpaired/singular tags also. But unfortunately, we do not have the closing tag for those. So , an unpaired tag is closed after adding a slash(/) just before the greater than > sign. For example: < br />. HTML Basics
IMPORTANT HTML TAGS <body> Tag The <body> tag in HTML is used to define the main content present inside an HTML page. It is always enclosed within <html>tag. A body tag contains starting as well as an ending tag. Syntax: <body> Body Contents... </body> HTML Basics
Attributes: There are many attributes in the <body> tag which are depreciated from HTML5 are listed below: background : It contains the URL of the background image. It is used to set the background image. bgcolor : It is used to specify the background color of an image. alink : It is used to specify the color of the active link. link : It is used to specify the color of visited links. text : It specifies the color of the text in a document. vlink : It specifies the color of visited links. onLoad : Name of the function to call when document has finished loading. HTML Basics
Paragraph or <p> tag: The <p> tag in HTML defines a paragraph. These have both opening and closing tags. So anything mentioned within <p> and </p> is treated as a paragraph. Syntax : <p> Content </p> HTML Basics
HTML HEADING TAGS A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display on the webpage. When you place the text within the heading tags <h1>.........</h1>, it is displayed on the browser in the bold format and size of the text depends on the number of heading. There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest level h1 (main heading) to the least level h6 (least important heading). h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is used for least important. HTML Basics
The following code shows all the heading levels, in use. <h1>Heading level 1</h1> <h2>Heading level 2</h2> <h3>Heading level 3</h3> <h4>Heading level 4</h4> <h5>Heading level 5</h5> <h6>Heading level 6</h6> HTML Basics
HTML Basics
HTML TEXT FORMATTING TAGS Bold Text : HTML<b> and <strong> formatting elements The HTML <b> element is a physical tag which display text in bold font, without any logical importance. If you write anything within <b>............</b> element, is shown in bold letters. Example: <p> <b> This is bold text. </b></p> Output: This is bold text. The HTML <strong> tag is a logical tag, which displays the content in bold font and informs the browser about its logical importance. If you write anything between <strong>???????. </strong>, is shown important text. Example : <p><strong> This is an important content </strong> , and this is normal content </p> Output: This is an important content , and this is normal content HTML Basics
Italic Text: HTML <i> and < em > formatting elements The HTML <i> element is physical element, which display the enclosed content in italic font, without any added importance. If you write anything within <i>............</i> element, is shown in italic letters. Example: <p> <i> This is italic text. </i></p> Output: This is italic text. The HTML < em > tag is a logical element, which will display the enclosed content in italic font, with added semantics importance. Example: <p>< em > This is an important content </ em > , which displayed in italic font. </p> Output: This is an important content , which displayed in italic font. HTML Basics
HTML Marked formatting If you want to mark or highlight a text, you should write the content within <mark>.........</mark>. Example: <h2> I want to put a <mark> Mark </ mark> on your face </h2> Output: HTML Basics
Underlined Text If you write anything within <u>.........</u> element, is shown in underlined text. <p> <u> This is underlined text . </ u></p> Output: This is underlined text. HTML Basics
Strike Text Anything written within <strike>.......................</strike> element is displayed with strikethrough. It is a thin line which cross the statement. < p> <strike> Text with strikethrough </strike> . </p> Output: Text with strikethrough HTML Basics
Superscript Text If you put the content within <sup>..............</sup> element, is shown in superscript; means it is displayed half a character's height above the other characters. Example: < p> x <sup> 2 </sup > +y <sup> 2 </ sup ></ p> Output: x 2 +y 2 HTML Basics
Subscript Text If you put the content within <sub>..............</sub> element, is shown in subscript ; means it is displayed half a character's height below the other characters. Example: <p>H<sub>2</sub> O </p> Output: H 2 O HTML Basics
HTML <DIV> TAG The div tag is known as Division tag. The div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc). Div tag has both open(<div>) and closing (</div>) tag and it is mandatory to close the tag . HTML Basics
<html> <head> <title> gfg </title> <style type=text/ css > p{ background-color:gray ; margin: 10px; } div { color: white; background-color: 009900; margin: 2px; font-size: 25px; } </style> HTML Basics
</head> <body> <div > div tag </div> <div > div tag </div> <div > div tag </div> <div > div tag </div> </body> </html> HTML Basics
HTML Basics
HTML TABLE HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row. We can create a table to display data in tabular form, using <table> element, with the help of < tr > , <td>, and < th > elements. In Each table, table row is defined by < tr > tag, table header is defined by < th >, and table data is defined by <td> tags. HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. But it is recommended to use div tag over table to manage the layout of the page . HTML Basics
HTML Table Tags HTML Basics
<!DOCTYPE html> <html> <style> table, th , td { border:1px solid black; } </style> <body> <h2>A basic HTML table</h2> <table style="width:100%"> < tr > < th >Company</ th > < th >Contact</ th > < th >Country</ th > </ tr > HTML Basics
< tr > <td>Infosys</td> <td> Narayn Murthy</td> <td>India</td> </ tr > < tr > <td>Google</td> <td> Sundar Pichai </td> <td>United States</td> </ tr > </table> <p>To understand the example better, we have added borders to the table.</p> </body> </html> HTML Basics
HTML Basics
HTML Table – Rowspan To make a cell span over multiple rows, use the rowspan attribute: The value of the rowspan attribute represents the number of rows to span. <table> < tr > < th >Name</ th > < td>Jill</td> </ tr > HTML Basics
< tr > < th rowspan ="2">Phone</ th > < td>555-1234</td> </ tr > < tr > < td>555-8745</td> </ tr > </ table> HTML Basics
HTML Basics
HTML Table – Colspan To make a cell span over multiple columns, use the colspan attribute. The value of the colspan attribute represents the number of columns to span < table> < tr > < th colspan ="2">Name</ th > < th >Age</ th > </ tr > HTML Basics
< tr > < td>Jill</td> < td>Smith</td> < td>43</td> </ tr > < tr > < td>Eve</td> < td>Jackson</td> < td>57</td> </ tr > </ table> HTML Basics
HTML Basics
HTML <a> Tag The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination. Example: <a href ="https://www.google.co.in ">Visit Google<a> By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red HTML Basics
HTML < img > tag HTML < img > tag is used to add image inside webpage/website. Nowadays website does not directly add images to a web page, as the images are linked to web pages by using the < img > tag which holds space for the image. Syntax: < img src ="" alt="" width="" height=""> HTML Basics
Attributes: The < img > tag has following attributes. src : It is used to specify the path to the image. alt : It is used to specify an alternate text for the image. It is useful as it informs the user about what the image means and also due to any network issue if the image cannot be displayed then this alternate text will be displayed. height : It is used to specify the height of the image. width : It is used to specify the width of the image. sizes : It is used to specify image sizes for different page layouts. srcset : It is used to specify a list of image files to use in different situations. HTML Basics
<!DOCTYPE html> <html> <body> <h1>The img element</h1> < img src ="tiger.jpg" alt="Tiger Face" width="200" height="300"> </body> </html> HTML Basics
HTML Basics
HTML LISTS HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists: 1. Ordered List or Numbered List ( ol ) 2. Unordered List or Bulleted List ( ul ) 3. Description List or Definition List (dl) HTML Basics
HTML Ordered List or Numbered List In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with < ol > tag and the list items start with <li> tag. < ol > <li>Aries</li> <li>Bingo</li> <li>Leo</li> <li>Oracle</li> </ ol > HTML Basics
Output: 1. Aries 2. Bingo 3. Leo 4. Oracle HTML Basics
HTML Unordered List or Bulleted List In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with < ul > tag and list items start with the <li> tag. Example: < ul > <li>Aries</li> <li>Bingo</li> <li>Leo</li> <li>Oracle</li> </ ul > HTML Basics
Output: o Aries o Bingo o Leo o Oracle HTML Basics
HTML Description List or Definition List HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia. The definition list is very appropriate when you want to present glossary, list of terms or other name-value list. The HTML definition list contains following three tags: 1. <dl> tag defines the start of the list. 2. < dt > tag defines a term. 3 . < dd > tag defines the term definition (description). HTML Basics
<dl> < dt >Aries</ dt > < dd > -One of the 12 horoscope sign. </ dd > < dt >Bingo</ dt > < dd > -One of my evening snacks </ dd > < dt >Leo</ dt > < dd > -It is also an one of the 12 horoscope sign. </ dd > < dt >Oracle</ dt > < dd > -It is a multinational technology corporation. </ dd > </dl> HTML Basics
Output: Aries -One of the 12 horoscope sign. Bingo -One of my evening snacks Leo -It is also an one of the 12 horoscope sign. Oracle -It is a multinational technology corporation. HTML Basics
FORM TAG Forms are required to take input from the user who visits the website. This form is used basically for the registration process, logging into your profile on a website or to create your profile on a website, etc The information that is collected from the form is – 1 . Name 2.Email Addresses etc. Now the form will take input from the form and post that data in backend applications (like PHP). So the backend application will process the data which is received by them. There are various form elements that we can use like text fields, text area, drop-down list, select, checkboxes, radio, etc. Syntax: <form> Form Content... </form> HTML Basics
Attributes: There are many attributes that are associated with the <form> tag. Some of them are listed below: Action Attribute : -This is used to send the data to the server after the submission of the form. Method : -This is used to upload the data by using two methods that are Get and Post. 1 . Get Method: -It has a limited length of characters of URL. We should not use get to send some sensitive data. This method is better for non-secure data. 2. Post Method: -It has no size limitations. The submission of the form with the method post, can not be bookmarked. Enctype attribute : -This attribute is used to specify that how a browser decodes the data before it sends it to the server . So the values of this attribute are: - 1.application/x-www-form- urlencoded − It is the standard method most forms used 2.multipart/form-data -it is used when you have something to upload like files of images, word files, etc. HTML Basics
An HTML form with two input fields and one submit button: <form action="/ action_page.php " method="get"> <label for=" fname ">First name:</label> < input type="text" id=" fname " name=" fname ">< br >< br > < label for=" lname ">Last name:</label> < input type="text" id=" lname " name=" lname ">< br >< br > < input type="submit" value="Submit"> </ form> HTML Basics
HTML <FRAME> TAG HTML <frame> tag define the particular area within an HTML file where another HTML web page can be displayed. A <frame> tag is used with <frameset>, and it divides a webpage into multiple sections or frames, and each frame can contain different web pages. Note: Do not use HTML <frame> tag as it is not supported in HTML5, instead you can use < iframe > or <div> with CSS to achieve similar effects in HTML. Syntax < frame src = "URL" > HTML Basics
Create Vertical frames: <!DOCTYPE html > <html> <head> <title> Frame tag </title> </head> <frameset cols="25%,50%,25%" > <frame src ="frame1.html" > <frame src ="frame2.html" > <frame src ="frame3.html" > </frameset> </html> HTML Basics
HTML Basics
Frame1.html <!DOCTYPE html > <html> <head> <style> div{ background-color: #7fffd4; height: 500px; } </style> </head> <body> <div> <h2> This is first frame </h2> </div> </body> </html> HTML Basics
Frame2.html <!DOCTYPE html > <html> <head> <style> div{ background-color: #2f4f4f; height: 500px; } </style> </head> <body> <div> <h2> This is Second frame </h2> </div> </body> </html> HTML Basics
Frame3.html <!DOCTYPE html > <html > <head> <style> div{ background-color: #c1ffc1; height: 500px; } </style> </head> <body> <div> <h2> This is Third frame </h2> </div> </body> </html> HTML Basics
HTML Basics
THANK YOU HTML Basics
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 21
- Slides 65
- Age 422 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views