Scribd
Upload
40 views

HTML

This document provides an overview of key HTML elements and CSS styles including: - Common HTML elements like <head>, <body>, <h1-6>, <p>, <a>, <img>, <ul>, <ol>, <li> - How to add links, images, lists, headings and paragraphs - CSS styles for color, font, text alignment and borders - Internal and external CSS stylesheets - Padding, margin and specific styles using id attributes - Embedding YouTube videos using iframe

Uploaded by

api-484770902
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
40 views

HTML

This document provides an overview of key HTML elements and CSS styles including: - Common HTML elements like <head>, <body>, <h1-6>, <p>, <a>, <img>, <ul>, <ol>, <li> - How to add links, images, lists, headings and paragraphs - CSS styles for color, font, text alignment and borders - Internal and external CSS stylesheets - Padding, margin and specific styles using id attributes - Embedding YouTube videos using iframe

Uploaded by

api-484770902
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

ITN101-651 INTRO TO IT

10/09/2019 - DENNIS CHUNG


HTML
HTML

<html>
<head>
<title>Page Title</title>
</head>

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

</html>
HTML HEADINGS

 <h1> defines the most important heading.


 <h6> defines the least important heading
PARAGRAPHS

 <p>This is a paragraph.</p>
<p>This is another paragraph.</p>
LINKS

 The link's destination is specified in the href attribute.


 Attributes are used to provide additional information about HTML elements.

 <a href="https://www.dtcc.edu">This is DTCC</a>


IMAGES

 HTML images are defined with the <img> tag.


 The source file (src), alternative text (alt), width, and height are provided as attributes:
 <img src=“dtcc.jpg" width="82" height="86" alt="">
IMAGE HYPERLINK

 Use Image instead of Text as a hyperlink

 Image Hyperlink
 <a href=" https://www.dtcc.edu"><img src=“dtcc.jpg" width="82" height="86" title=“DTCC" alt=""></a>
BUTTONS

 Button usually used within a FORM to trigger corresponding script such as perl. Javascript, php, etc…

 <button>Click me</button>
LISTS

<ul>
<li>Cobol</li>
<ul><li>sugar</li></ul>
 HTML lists are defined with the <li>Java</li>
 <ul> (unordered/bullet list) or the <li>PHP</li>
</ul>
 <ol> (ordered/numbered list) tag,
<ol>
 followed by <li> tags (list items): <li>Coke</li>
<li>Sprite</li>
<li>Pepsi</li>
</ol>
ELEMENTS

 Element is everything within the BEGIN Tag and END Tag


 <p> element </p>
 <h1> element </h1>
 <br>

 <br> is the line break, with no element and no end tag.


STYLES - COLOR
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<body>
<html>
<body style="background-color:powderblue;">
<p>I am normal</p>
<h1>This is a heading</h1>
<p style="color:red;">I am red</p>
<p>This is a paragraph.</p>
<p style="color:blue;">I am blue</p>
</body>
</html>
</body>
</html>
STYLES - FONT
Arial
 There are 15 safe fonts Palatino
Roboto
Garamond
Times New Roman
Bookman
Times
Comic Sans MS
Courier New
Candara
Courier
Arial Black
Verdana
Impact
Georgia

<h1 style="font-family:verdana;">This is a heading</h1>


<h1 style="font:times new roman;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
<p style="font-family:courier;font-size:10px;">This is a paragraph.</p>
<p style="font-family:courier;font-size:10;">This is a paragraph.</p>
<p style="font-family:courier;font-size:200%;">This is a paragraph.</p>
STYLES - ALIGNMENT

 text-align property defines the horizontal text alignment for an HTML element

<h1 style="text-align:center;">Centered Heading</h1>


<p style="text-align:center;">Centered paragraph.</p>
FORMATTING

 HTML uses elements like <b> and <i> for formatting <p>This text is normal.</p>
output, like bold or italic text.
<p><strong>This text is strong.</strong></p>
 Formatting elements were designed to display special types <i>This text is italic</i>
of text: <h2>HTML <small>Small</small> Formatting</h2>
<h2>HTML <mark>Marked</mark> Formatting</h2>
 <b> - Bold text  <del> - Deleted text <p>My favorite color is <del>blue</del> red.</p>
<p>This is <sub>subscripted</sub> text.</p>
 <strong> - Important text  <ins> - Inserted text
<p>This is <sup>superscripted</sup> text.</p>
 <i> - Italic text  <sub> - Subscript text
 <mark> - Marked text
 <sup> - Superscript text
 <small> - Small text
QUOTATION & CITATION ELEMENTS

 Quotation Mark <p>The <abbr title="World Health Organization">WHO</abbr> was


 Blockquote for Quotation founded in 1948.</p>

 Abbreviation <p>Marking up abbreviations can give useful information to browsers,


 Bi-Directional Override translation systems and search-engines.</p>

 Work title <img


src="https://mycourses.dtcc.edu/d2l/lp/navbars/6606/theme/viewimage/58/view
?v=20.19.9.18088-31" width="220" height="277" alt="The Scream">
<p><cite>This is our logo</cite></p>

<bdo dir="rtl">This line will be written from right to left</bdo>


COMMENTS

 <!-- Write your comments here -->


COLORS

 HTML supports 140 standard color names:

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
HTML STYLES - CSS

 CSS stands for Cascading Style Sheets.


 CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
 CSS saves a lot of work. It can control the layout of multiple web pages all at once.
 CSS can be added to HTML elements in 3 ways:
 Inline - by using the style attribute in HTML elements
 Internal - by using a <style> element in the <head> section
 External - by using an external CSS file
 The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline
and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.
INTERNAL CSS
 An internal CSS is defined in the <head> section of an HTML page, within a <style> element:
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style></head>
<body>

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

</body>
</html>
EXTERNAL CSS

<!DOCTYPE html>
<html> In the styles.css file, it contains the following
<head>
<link rel="stylesheet" href="styles.css">
</head> body {
<body> background-color: powderblue;
}
<h1>This is a heading</h1> h1 {
<p>This is a paragraph.</p> color: blue;
}
</body> p{
</html> color: red;
}
CSS BORDER

 The CSS border property defines a border around an HTML element:

p{
border: 1px solid powderblue;
}
CSS PADDING

 The CSS padding property defines a padding (space) between the text and the border

p{
border: 1px solid powderblue;
padding: 30px;
}
CSS MARGIN

 CSS margin property defines a margin (space) outside the border

p{
border: 1px solid powderblue;
margin: 50px;
}
ID ATTRIBUTE

 To define a specific style for one special element, add an id attribute to the element:

<style>
#p01 {
color: blue;
}
</style>

<p id="p01">I am different.</p>


YOUTUBE VIDEO

Using iframe...
<iframe width="420" height="315"
src="https://www.youtube.com/embed/RlZ9rXbrJqM">
</iframe>

You might also like