HTML

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
 

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{
padding: 30px;
}
CSS MARGIN
 CSS margin property defines a margin (space) outside the border
p{
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>

HTML

Uploaded by

Copyright:

Available Formats

You might also like

HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

ITN101-651 INTRO TO IT

10/09/2019 - DENNIS CHUNG

 <h1> defines the most important heading.

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

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

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

 Use Image instead of Text as a hyperlink

 Element is everything within the BEGIN Tag and END Tag

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

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

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

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

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

 Work title <img

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



 HTML supports 140 standard color names:

 CSS stands for Cascading Style Sheets.

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

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

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

You might also like