Lec 2 Web.pptxLec 2 Web.pptxLec 2 Web.pptx
pirode9160
14 views
38 slides
Oct 11, 2024
Slide 1 of 38
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
About This Presentation
Lec 2 Web.pptx
Slide Content
Web Engineering Lecture No.02 11-10-2024 10/11/2024 1 Instructor: Ms. Atika Tanveer
Outline What is html? Tags Elements Heading Paragraphs Image Links Order List Table 10/11/2024 2
10/11/2024 3 <HTML> Hypertext Markup Language
10/11/2024 4 What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of markup tags The tags describe document content HTML documents contain HTML tags and plain text HTML documents are also called web pages
10/11/2024 5 HTML Tags HTML markup tags are usually called HTML tags HTML tags are keywords (tag names) surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, with a forward slash before the tag name Start and end tags are also called opening tags and closing tags
10/11/2024 6 HTML Elements " HTML tags" and "HTML elements" are often used to describe the same thing . An HTML element is everything from the start tag to the end tag. The start tag is often called the opening tag. The end tag is often called the closing tag HTML Element: < p>This is a paragraph.</p>
10/11/2024 7 HTML Attribute Attribute is the property of an tag that specified in the opening angle brackets. It supplies additional information like color , size, home font-style etc to the browser about a tag. E.g. most of the common attributes are height, color , width, src , border, align etc.
10/11/2024 8 Web Browsers The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be presented/displayed to the user
10/11/2024 9 HOW TO CREATE AN HTML DOCUMENT The essential tags that are required to create a HTML document are: <HTML>.............</HTML> <HEAD>.............</HEAD> <BODY>.............</BODY>
10/11/2024 10 HTML Tag <HTML> The <HTML> tag encloses all other HTML tags and associated text within your document. It is an optional tag. You can create an HTML document that omits these tags, and your browser can still read it and display it. But it is always a good form to include the start and stop tags . The format is: <HTML> Your Title and Document (contains text with HTML tags) goes here </HTML> Most HTML tags have two parts, an opening tag and closing tag. The closing tag is the same as the opening tag, except for the slash mark e.g. </HTML>. The slash mark is always used in closing tags.
10/11/2024 11 An HTML document has two distinct parts HEAD and BODY <HTML> <HEAD> ............. </ HEAD> <BODY> ............. </ BODY> </HTML>
10/11/2024 12 HEAD Tag <HEAD> HEAD tag comes after the HTML start tag. It contains TITLE tag to give the document a title that displays on the browsers title bar at the top. The Format is: <HEAD> <TITLE> Your title goes here </TITLE> </HEAD>
10/11/2024 13 BODY Tag <BODY> The BODY tag contains all the text and graphics of the document with all the HTML tags that are used for control and formatting of the page . The Format is : <BODY> Your Document goes here </BODY > An HTML document, web page can be created using a text editor, Notepad or WordPad. All the HTML documents should have the extension . htm or html. It require a web browser like Internet Explorer to view the document .
10/11/2024 14 Attributes used with <BODY> BGCOLOR: u s e d t o s e t t h e b a c k g r o u n d c o l o r f o r t h e document Example: <BODY BGCOLOR="yellow"> Your document text goes here. </BODY> TEXT: used to set the color of the text of the document Example: <BODY TEXT="red">Introduction to HTML:: 77 Document text changed to red color </BODY>
10/11/2024 15 Attributes used with <BODY> MARGINS: set the left hand/right hand margin of the document LEFTMARGIN: set the left hand margin of the document Example: <BODY LEFTMARGIN="60"> This document is indented 60 pixels from the left hand side of the page. </BODY> TOPMARGIN: set the left hand margin of the document Example: <BODY TOPMARGIN="60"> This document is indented 60 pixels from the top of the page. </BODY>
10/11/2024 16 HTML Editors HTML can be edited by using a professional HTML editor like: Microsoft Expression Web Coffee Cup HTML Editor Notepad ++ / Notepad Visual Studio Code
10/11/2024 17 HTML Document Example <!DOCTYPE html> <html> <head> <title>title</title> </head> <body> <p>This is my first paragraph.</p> </body > </html>
10/11/2024 18 HTML Paragraphs Paragraphs are defined with the <p> tag. Example < p>This is a paragraph</p> < p>This is another paragraph</p>
10/11/2024 19 HTML Headings HTML Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. Example <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
10/11/2024 20 Empty HTML Elements HTML elements with no content are called empty elements. < br > is an empty element without a closing. Use the < br > tag if you want a line break (a new line) without starting a new paragraph: < p>This is< br >a para< br >graph with line breaks</p>
10/11/2024 21 HTML Lines The < hr > tag creates a horizontal line in an HTML page. The hr element can be used to separate content: Example <body> < hr > </body> Output :
10/11/2024 22 HTML Comments Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. Comments are written like this: Example <!-- This is a comment -->
10/11/2024 23 HTML Text Formatting HTML uses tags like <b> and < i > for formatting output, like bold or italic text.
10/11/2024 24 HTML Text Formatting Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed. Comments are written like this: Example <!-- This is a comment -->
10/11/2024 25 HTML Hyperlinks (Links) The HTML <a> tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand. The most important attribute of the <a> element is the href attribute, which indicates the link’s destination. 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
10/11/2024 26 The HTML <title> Element The <title> tag defines the title of the document. The <title> element is required in all HTML/XHTML documents. The <title> element: defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search-engine results
10/11/2024 27 The HTML <style> Element The <style> tag is used to define style information for an HTML document. Inside the <style> element you specify how HTML elements should render in a browser: <head> <style type="text/ css "> body { background-color:yellow ;} p { color:blue ;} </style> </head>
10/11/2024 28 HTML Images In HTML, images are defined with the < img > tag. The < img > tag is empty, which means that it contains attributes only, and has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display. Syntax for defining an image: < img src =" url " alt=" some_text ">
10/11/2024 29 HTML Tables Tables are defined with the <table> tag. A table is divided into rows (with the < tr > tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc .
10/11/2024 30 HTML Tables Tags <table > used to create table < tr > table is divided into rows <td > each row is divided into data cells < th > Headings in a table <Caption> caption to the table < thead > Defines a table head Defines a table body < tbody > Defines a table head Defines a table body < tfoot > Defines a table footer < Cellspacing > amount of space between table cells < Cellpadding > space around the edges of each cell < Colspan > No of column working with will span < rowspan > No of rows working with will span <Border > attribute takes a number
10/11/2024 31 HTML Tables < html><body> <h4>Horizontal Header:</h4> <table border="1"> < tr > < th >Name</ th > < th >Loan No</ th > < th >Amount</ th > </ tr > < tr > <td>Jones</td> <td>L-1</td> <td>5000</td></ tr > </table>< br >< br > <h4>Vertical Header:</h4> <table border="5"> < tr > < th >Name</ th > <td>Jones</td> </ tr > < tr > < th >Loan No</ th > <td>L-1</td> </ tr > < tr > < th >Amount</ th > <td>5000</td></ tr > </table> </body></html>
10/11/2024 32 HTML Tables
10/11/2024 33 HTML Unordered Lists An unordered list starts with the < ul > tag. Each list item starts with the <li> tag. The list items are marked with bullets (typically small black circles). < ul > <li>Coffee</li> <li>Milk</li> </ ul > How the HTML code above looks in a browser: Coffee Milk
10/11/2024 34 HTML Ordered Lists An ordered list starts with the < ol > tag. Each list item starts with the <li> tag. The list items are marked with numbers. < ol > <li>Coffee</li> <li>Milk</li> </ ol > How the HTML code above looks in a browser: Coffee Milk
10/11/2024 35 HTML Colors HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB).
10/11/2024 36 Font Colors :<FONT > By using <FONT> Tag one can specify the colors , size of the text. Example: <FONT> Your text goes here </FONT> Attributes of <FONT> are: - COLOR: Sets the color of the text that will appear on the screen. It can be set by giving the value as #rr0000 for red (in RGB hexadecimal format), or by name. Example: <FONT COLOR="RED"> Your text goes here </FONT>
10/11/2024 37 Font Size :<FONT> SIZE: Sets the size of the text, takes value between 1 and 7, default is 3. Size can also be set relative to default size for example; SIZE=+X, where X is any integer value and it will add with the default size. Example: <FONT SIZE=5> Font Size changes to 5 </FONT> FACE: Sets the normal font type, provided it is installed on the user’s machine. Example: <FONT FACE="ARIAL"> the text will be displayed in Arial</FONT>
10/11/2024 38 Thank You
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 14
- Slides 38
- Age 416 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