Scribd
Upload
17 views17 pages

Web Developent D2

Uploaded by

WarenChua
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
17 views17 pages

Web Developent D2

Uploaded by

WarenChua
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

Web Development

Web1-M1 (1-3pm)

Day 2
Html Tag List
Root Tag
<html>

Document MetaData
<meta>, < head>, <title>, <link>, <style>

Section
<body>,<h1>-<h6>, <nav>, <main>, <section>,<footer>,<article>

Grouping Content
<div>,<p>,<ul>, <il>,<ol> <main>

Text Level symantics


<a>, <em>, <br>, <strong>, <small>
Embedded Content
<img>
Block Element & Inline Element
Block element as an actual block.
<div>, <h1>-<h6>, <p>,<ul>, <il>, <nav>
<main>, <section>,<footer>,<article>

!DOCTYPE html>
<html lang= en>
<head>
<Meta charset="utf-8“>
<Title> Block Elements</Title>
</head>
<body>
<div>My Important Heading</div>
</body>
</html>
Block Element & Inline Element
An inline element does not start on a new line and only takes up
as much width as necessary
<a>, <img>, <strong>, <br>, <em>
<!DOCTYPE html>
<html>
<head>
<Title> Inline Elements</Title>
</head>
<body>
<h1>My <br>Important Heading</h1>
</body>
</html>
Attributes List
• Href <!DOCTYPE html>
• Height <html lang=en>
<head>
• Width <Meta charset="utf-8">
• Class <Title>Attributes & Img Tag Example</Title>
• Id </head>
• Src <body>
• <h2>Images on Another website</h2>
Style
<img src="http://www.nerdist.com/wp-content/uploads/2016/03/Fiding-nemo-
• Title Bruce-marlin.jpg" alt="Fiding-nemo" width="400" height="300">
• Lang
</body>
</html>
Attributes List
• Href <!DOCTYPE html>
• Height <html lang=en>
<head>
• Width <Meta charset="utf-8">
• Class <Title>Attributes & Img Tag Example</Title>
• Id <img src="girl.jpg" alt="Girl in a jacket" width="500" height="600">
• Src </head>
• <body>
Style
<h2>Image Size</h2>
• Title <p> Sample of how to put images on your WebPage</p>
• Lang </body>
</html>
Attributes List
• Href <!DOCTYPE html>
• Height <html lang=en>
<head>
• Width <Meta charset="utf-8">
• Class <Title> Images Example</Title>
• Id </head>
• Src <body>
• <h2>Another Example</h2>
Style
<p>The alt attribute should reflect the image content, so users who
• Title cannot see the image gets an understanding of what the image
• Lang contains:</p>
<img src="Images/chania.jpg" alt="Flowers in Chania" width="460"
height="345">
</body>
</html>
Introduction to CSS (Cascading Style Sheets)
HTML without CSS
The first web page address was August 6, 1991.
http://info.cern.ch/hypertext/WWW/TheProject.html.
Introduction to CSS (Cascading Style Sheets)

• Allows you to create good looking web pages


HTML
Introduction to CSS (Cascading Style Sheets)
• Selectors
• p { ... }
• Properties
• p{
• color: ...;
• font-size: ...;
• }
• Values
• p{
• color: orange;
• font-size: 16px;
• }
3 Type of CSS in HTML
Inline Styles
• Inline styles are styles that are written directly in the tag in
the HTML document.
<!DOCTYPE html>
<html lang=en>
<head>
<Meta charset="utf-8">
<Title> Inline styles </Title>
</head>
<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>
3 Type of CSS in HTML
Internal Styles
• Internal - by using a <style> element in the <head> section.
<!DOCTYPE html>
<html lang=en>
<head>
<Meta charset="utf-8">
<Title> Internal Styles </Title>
<style>
body {background-color:LightBlue;} h1 {color: blue;} p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3 Type of CSS in HTML
External Styles
• External - by using an external CSS file<!DOCTYPE html>
< <!DOCTYPE html>
<html>
<head>

<Title> External styles </Title>


<link rel="stylesheet" href="css/styles.css">

</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Structure Of HTML
<!DOCTYPE html> -> DOCTYPE declaration defines the document type.

<html> -> The text between <html> and </html> describes the web page.

<head> -> The text between <head> and </head> is the visible headpage
content.
<title> -> The text between <title> and </title> is the visible
title of the browser.
</title>
</head>

<body>-> The text between <body> and </body> is the visible page content

</body>

</html>
HTML Attributes
Html Attributes List Example

• Id  Specifies a unique id for an element.


• Href  Specifies the URL (web address) for a link.
• style  Specifies an inline CSS style for an element.
• Alt  Specifies an alternative text for an image, when the
image cannot be displayed.

Ex.

<p title="I'm a tooltip">
This is a paragraph.

</p>
HTML Element
• An HTML element is defined by a starting tag. If the element contains
other content, it ends with a closing tag, where the element name is
preceded by a forward slash.

<!DOCTYPE html>
<html>

<head>
  <title>TITLE WEBSIE</title>
  <meta charset="UTF-8">
</head>

<body>

 
Slide Title

Product A Product B
• Feature 1 • Feature 1
• Feature 2 • Feature 2
• Feature 3 • Feature 3

You might also like