Download as PPT, PDF, TXT or read online from Scribd
Download as ppt, pdf, or txt
You are on page 1/ 43
BIT 381
HTML5 HTML Introduction • HTML is the standard markup language for creating Web pages • 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 consists of a series of elements • HTML elements tell the browser how to display the content A Simple HTML Document • Example: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1> My First Heading </h1> <p> My first paragraph </p> </body> </html> • The <!DOCTYPE html> declaration defines that this document is an HTML5 document. • The <html> element is the root element of an HTML page • The <head> element contains meta information about the HTML page • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. • The <h1> element defines a large heading • The <p> element defines a paragraph What is an 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 Editors • Learn HTML Using Notepad or TextEdit • Web pages can be created and modified by using professional HTML editors like Notepad++, Visual Studio Code, CoffeeCup, Sublime Text • However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac). • We believe in that using a simple text editor is a good way to learn HTML. • Save the HTML page ending with the extention .html HTML Documents • All HTML documents must start with a document type declaration: <! DOCTYPE html>. • The HTML document itself begins with <html> and ends with </html>. • The visible part of the HTML document is between <body> and </body>. <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> The <!DOCTYPE> Declaration • The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly. • It must only appear once, at the top of the page (before any HTML tags). • The <!DOCTYPE> declaration is not case sensitive. • The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html> HTML Headings • HTML 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 heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <!DOCTYPE html> <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html> HTML Paragraphs • HTML paragraphs are defined with the <p> tag:
<!DOCTYPE html> <html> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html> HTML Links • HTML links are defined with the <a> tag:
• Example <a href="https://www.yu.edu.jo"> This is a link</a>
• The link's destination is specified in the href attribute.
• Attributes are used to provide additional information about HTML elements. HTML attributes • Syntax: • name = “value” 1) The href attribute • The <a> tag defines a hyperlink • The href attribute specifies the URL of the page the link goes to
• Example • <a href = https://www.yu.edu.jo”> visit Yarmouk University web page </a> 2) The src attribute • The <img> tag is used to embed an image in an HTML page. • The src attribute specifies the path of the image to be displayed on the web page. • Example: <img src = “…….path……”> 3) The width and height attributes • The <img> tag should contain the width and height of the image in pixels. • Example: • <img src= “……path…..” width=“200” height = “250”> 4) The alt attribute • The alt attribute for the <img> tag specifies an alternate text for an image , if the image for some reasons can not be displayed. • Example: • <img src="C:\Users\Qaisd\Desktop\Spring 2021\Examples at Home\petra.JFIF" width = "200" height = "250" alt = "PETRA Jordan" > 5) The style attribute • The style attribute is used to add styles to an element, such as color, font, size, and more. • Syntax: <tagname style="property:value;"> Example: • <P style = "color : blue ; font-size:25px" > • Yarmouk University <BR> • Dept of IT<BR> • BIT381: Web Dev. • </P> • HTML supports 140 standard color names. Some colors in HTML5 continue The HTML Style Attribute
• <tagname style="property:value;"> • The property is a CSS property. • The value is a CSS value. • We will do more examples about CSS later in this semester. Background Color
• The CSS background-color property defines the background color for
an HTML element. • Example <body style="background-color:powderblue;">
<h1>This is a heading</h1> <p>This is a paragraph.</p>
</body> Set background color for two different elements: • <body>
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body> Text Color • <h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fonts • The CSS font family property defines the font to be used for an HTML element:
• Example
• <h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p> Text Alignment • The CSS text-align property defines the horizontal text alignment for an HTML element:
• Example: • <h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p> HTML Text Formatting
• HTML contains several elements for defining text with a special
meaning. • Example
•This text is bold
•This text is italic •This is subscript and superscript HTML Formatting Elements • <b> Bold text • <strong> important text • <i> italic text • <em> Emphasized text • <mark> Marked text • <small> Smaller text • <del> Deleted text • <ins> Inserted text • <sub> Subscript text • <sup> Superscript text • HTML <b> and <strong> Elements • The HTML <b> element defines bold text, without any extra importance>
• The HTML <strong> element defines text with strong importance.
The content inside is typically displayed in bold.
• The HTML <em> element defines emphasized text. The content
inside is typically displayed in italic. HTML <mark> Element
• The HTML < mark> element defines text that should be marked or highlighted: Example1 Example-2 Example-3 6) The lang attribute • You should always include the lang attribute inside the <html> tag , to declare the language of the web page. • Example: • <!DOCTYPE html> • <HTML lang =“en”> • …….. • </HTML? 7) The title attribute • The title attribute defines some extra information about an element. • Example: • <H1 title =" I am a tooltip"> This is a good example </H1> HTML Comments
• HTML comments are not displayed in the browser, but they can help document your HTML source code. • Example: • <!-- Write your comments here --> • Notice that there is an exclamation point (!) in the start tag, but not in the end tag. • Example: • <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Remember to add more information here --> style Example • <p style = "text-align:center ;background-color:powderblue; color: red; font-size: 30px"> My Name is ------ </p> HTML5 Document Example Web Page
