Scribd
Upload
27 views

Grade 8 - HTML

Uploaded by

John Argel Cuentas
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
27 views

Grade 8 - HTML

Uploaded by

John Argel Cuentas
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 32

HTML Basics

HTML BASICS
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>.
Example:
<!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.
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the
least important heading:
• <h1>This is heading 1</h1>
• <h2>This is heading 2</h2>
• <h3>This is heading 3</h3>
HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
• HTML links are hyperlinks. Links are found in nearly
all web pages. Links allow users to click their way from
page to page.
<a href="https://www.w3schools.com">This is a link</a>
HTML 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="w3schools.jpg" alt="W3Schools.com"
width="104" height="142">
Attributes

• Attributes are the modifier of HTML tags that provide additional


information. It is helpful since not all tag describe their own
behavior. Attributes work as an extension of a tag and is easy to
use.
• An HTML attribute is a piece of markup language used to adjust
the behavior or display of an HTML element.
• For example, attributes can be used to change the color, size, or
functionality of HTML elements.
• The href attribute indicates the destination of the hyperlink.
HTML Attributes

• HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about
elements.
• Attributes are always specified in the start tag.
• The href Attribute
• The <a> tag defines a hyperlink. The href attribute
Below is the basic syntax as follows:
<tag attribute=“value”>
<a href="https://www.w3schools.com">Visit
W3Schools</a>
Attributes and its value are both inside a tag. An attribute
should be included within a tag so that the web browser
will know how to utilize the attribute. The example below
shows the use of an attribute when creating a hyperlingk.
<a href=http://www.google.com>Go to Google site.</a>
Keyboard shortcut keys
Windows Shortcut FUNCTIONS
Select all the items in the current
CTRL+A
window
CTRL+C Copy
CTRL+X Cut
CTRL+V Paste
CTRL+Z Undo
CTRL+F search on the current page
CTRL+P Prints the current page
Windows KEY+L Lock the computer
Switch between the running
ALT+TAB
programs
ENTITIES
ENTITIES
• Is a set of words and symbols that are used to display
a special character.
• This can be the dollar sign (
• The process of placing entities in a web page is called
character encoding.
This table shows a list of generally used
entities.
Symbol Description Entity Name Code

© Copyright &copy; &#169;

° Degree &deg; &#176;

Dollar &dollar; &#36;

% Percent &percent; &#37;

® Registered trademark &reg; &#174


EMOJI
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>My First Emoji</h1>

<p>&#128512;</p>

</body>
</html>
Improving Web
Pages by Adding
Media Content
Media Mania
Images play an important role in making sense of the text.
To insert an image in HTML, we can use the code below:
<img src=“HTML FILES/opera.png” alt=“Opera Logo”/>
The image will only display if the subfolder labelled
“images” is found. Both the src (short for source) attribute and the
alt attribute (short for alternate text) are required to be fully valid.
The W3C requires the alt attribute for accessibility by people with
disabilities.
Below are some attributes
used by the <img> tag;
Attribute Value Description
Src URL Specifies the location of the image. It can be a path or
URL
Alt Text Specifies alternate text for the image. It display when
the user hovers the mouse pointers over the image.
Height Pixels Specifies the image height
Width Pixels Specifies the image width
Video Tags
• Video tags will enable you to show videos in HTML
documents.
• The following is an example of a code for placing an
mp4 file as part of the web page.
<video src=“intro.mp4” width=“400” height=“300”></video>
Filename of Width of the Height of the
the video video file video file
Other attributes that can be added for video control.
Poster- this allows you to place an image file that shows up
before the video loads or while it is downloading.
Auto play- A setting that can play the video automatically when
the browser loads the page.
Controls- A setting that can turn the controls on/off. These
controls contain play, pause, stop and volume.
Loop- A setting that allow you to keep repeating the video when
it is done.
Using figure and
Figcaption tags
Figure tag and Figcaption tag
Figure Tag- is used to handle a group of image,
diagram, or photo. This tag is beneficial since it has the
ability to easily place multiple images side by side.
Figcaption tag- provides a caption for the figure. It
adds a caption to an image on a web page. The caption
can be displayed before or after the image.
Audio tags
• Will enable you to add audio such as music,
recordings, sound effects and other sound in html.
• To use the audio, include the <audio> tag and a file
path or the Uniform Resource Locator (URL) to the
audio file, similar to how you place videos. Audio and
Video have similar controls
The HTML syntax when inseting audio files
<audio controls=“controls”>
<source src=“sample.mp3”
type=“audio/mp3”></audio>
Attribute Value Description
Href URL Specifies the URL of the
page’s destination
Hreflang Language code Specifies the language of the
linked document
Media Media-query Specifies what media/device
the linked document is best
suited for
Type Media type Specifies the type of Media
linked document. Common
types of media are the
following:
 Application
 Audio
 Font/text
 Image/video
THANK YOU!!!!!!!!!

You might also like