Scribd
Upload
16 views

Lesson 5

The document discusses various HTML tags - <meta>, <link>, <script>, <iframe>, <progress> - and how they are used. It also provides examples of how to implement each tag. Finally, it covers CSS and the different ways to link CSS to HTML documents, including internal CSS using the <style> tag, external CSS using the <link> tag, and inline CSS using the style attribute.

Uploaded by

Angel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

Lesson 5

The document discusses various HTML tags - <meta>, <link>, <script>, <iframe>, <progress> - and how they are used. It also provides examples of how to implement each tag. Finally, it covers CSS and the different ways to link CSS to HTML documents, including internal CSS using the <style> tag, external CSS using the <link> tag, and inline CSS using the style attribute.

Uploaded by

Angel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

IT223 – Web System and

Technologies

Lesson #5
(Web Development)
Lesson Flow
- Other HTML Tags
- CSS
<meta> Tag
Defines metadata about the HTML file, it should
always be placed inside the <head> tag.
The <meta> tag does not display anything in the
webpage but is essential in giving instruction on
how the webpage is displayed or searched in
search engines.
Example:
<html>
<head>
<meta charset =“UTF-8”>
<meta name = “description” content=“Simple Landing Page”>
<meta name = “keyword” content=“Simple landing page, landing page, simple”>
<meta name = “author” content=“BSIT Student”>
<meta name = “viewport” content=“width-device-width, initial-scale=1.0”>
</head>
</html>
<link> Tag
Defines a “link” between the HTML file to an
external source file, such as favicons and
stylesheets(css).
It is normally use in the <head> tag to associate
an icon or a css file to the html document.
Example:
<html>
<head>
<link rel=“icon” href=“favicon.ico”/>
<link rel=“stylesheet” href=“style.css”/>
</head>
</html>
<script> Tag
It is used to include a client-side script which is
JavaScript
It can be used by either including a JavaScript
code inside the tag or using an external file using
the src attribute.
Example:
<script>
alert(‘Hello World!’)
</script>

Or

<script src=‘somescript.js’></script>
<iframe> tag
It is used to embed an HTML Document within an HTML Document
It is often used to include buttons or content from other websites.

Example:

<html>
<body>
<iframe src=https://websitenakoni.com title=“Dili Ko mag saba”/>
</body>
</html>
<progress> Tag
It is used to display a progress bar. It is commonly
used to display task progress.

<label> tags can also be used for the


<progress> tags for accessibility.
Example:

<html>
<body>
<progress value=“75” max=“100”/>
</body>
</html>
CSS
CSS (Cascading Style Sheet) is the standard
language used to style an HTML Document.

CSS determines how to display the HTML


Document in a more appealing way. Adding
colors, formatting etc.
CSS Files
Thes files could be linked to an HTML file and edited on text
editors.

CSS Files are saved with the extension .css

Example Syntax:
P{
color:red;
font-size:24px;
}
<style> Tag
Used to integrate a Stylesheet (css) to our HTML
Document without creating an external CSS file.

The <style> Tag contains CSS code that styles the


current HTML Document it is attached to.
They have 3 ways on how to linking CSS file
- Internal CSS
- External CSS
- Inline CSS
Internal CSS
CSS that uses the <style> tag inside the HTML
Document.

This type if linking does not need any .css files.


The <style> tag handles the styling of the current
HTML file.
External CSS
Requires a separate CSS file and makes use of the
<link> tag for us to be able to link the CSS file to our
HTML Document.

This type of linking is advantageous since we can


reuse our CSS file over and over without retyping
anything.
Inline CSS
This is the fastest way to integrate styles to our HTML
Document.

This can also make your code very hard to read so


don’t use it unless you really need to.

It uses the style attribute in all the elements.


Alubijid | Balubal | Cagayan de Oro | Claveria | Jasaan | Oroquieta | Panaon | Villanueva

Home of the Trailblazers

You might also like