Scribd
Upload
23 views16 pages

Website Authoring

The document discusses various elements used to create the content layer of an HTML page, including headings, paragraphs, links, images, and more. It also covers head section elements like the page title, external stylesheets, metatags for describing content, and setting the character encoding. Elements for creating body content like inserting objects, using div and span tags, and different types of hyperlinks are also summarized.

Uploaded by

Smarty Elephant
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
23 views16 pages

Website Authoring

The document discusses various elements used to create the content layer of an HTML page, including headings, paragraphs, links, images, and more. It also covers head section elements like the page title, external stylesheets, metatags for describing content, and setting the character encoding. Elements for creating body content like inserting objects, using div and span tags, and different types of hyperlinks are also summarized.

Uploaded by

Smarty Elephant
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/ 16

HTML

Creating the Content Layer

The content layer of a web page is made up of


HTML elements such as headings (<h1>, <h2>,
etc.), paragraphs (<p>), links (<a>), images
(<img>), and more
Head Section Elements
Page Title
The <title> element is used to set the page title that displays in
the browser tab
It is placed inside the <head> section of the HTML document
External Stylesheets
External stylesheets are linked in the <head> section using the <link>
element
The rel the attribute is set to "stylesheet", and the href the attribute
contains the relative file path to the CSS file
Stylesheets are loaded in the order they are listed, so hierarchy is
important
Metatags
• Metatags are snippets of text in HTML that describe a page's content
• They don't appear on the page itself but in the page's code
• Search engines, browsers and other web services use metatags to glean information
about a web page
Charset
The <meta charset="UTF-8"> the tag specifies the character encoding for the HTML
document
UTF-8 is the most common character encoding and includes almost all characters from all
writing systems
Keywords
The keywords attribute in a <meta> tag is a comma-separated list of words that represent the
content of the web page
It was originally intended to help search engines understand the content of a page
Author
The author attribute in a <meta> the tag
identifies the author of the web page
Description
The description attribute in a <meta> tag provides a
concise explanation of the content of the web page

Viewport
The <meta name="viewport" content="width=device-width, initial-scale=1"> a tag
makes your web page display correctly on all devices (desktop, tablet, mobile)
It controls the viewport size and the initial zoom level
Default Target Windows
The target attribute of the <base> the element can set a default target window for
all links on a page
For example, <base target="_blank"> will open all links in a new window or tab

https://www.w3schools.com/tags/tag_meta.asp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
<meta name="description" content="This is my web page">
<meta name="author" content=“John">
<base target="_blank">
</head>
<body>
<h1>Welcome to My Web Page!</h1>
<p>This is a sample paragraph.</p>
</body>
</html>
Creating Body Content
Inserting Objects
• Insert text with elements like <p> for paragraphs and <h1> to <h6> for headings
• Insert images with the <img> element, using the src attribute to specify the image
source
• Use the alt attribute to provide alternate text for images
• Adjust image or video size with the width and height attributes
• Insert sound clips and videos with the <audio> and <video> elements, adding controls
for playback controls, and autoplay to start automatically
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
</audio>

<video controls autoplay>


<source src="video.mp4" type="video/mp4">
</video>

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video
Stylesheet
Using the <div> Tag
The <div> a tag is a container unit which encapsulates other page elements and
divides the HTML document into sections

<div> elements are block level elements and are often used to group elements
to format them with styles

Using the <span> Tag

<p>My brother has <span style="color: blue">blue</span> eyes.</p>

https://www.w3schools.com/html/tryit.asp?
filename=tryhtml_classes_css
<html>
<head>
<style>
.blue-text {
color: blue;
}
.large-font {
font-size: 20px;
}
</style>
</head>
<body>
<div class="blue-text large-font">
<h1>Blue Heading</h1>
<p>Blue paragraph.</p>
<ul style="list-style-type:circle;">
<li>Blue list item 1</li>
<li>Blue list item 2</li>
</ul>
</div>
</body>
</html>
Hyperlink Types
Same-page bookmark: Use the # followed by the id of the element, you want to jump to. Example: <a
href="#section1">Go to Section 1</a>

Locally stored web page: Use the relative path to the file. Example: <a href="contact.html">Contact Us</a>

External website: Use the full URL. Example: <a href="https://www.google.com">Google</a>

Email link: Use mailto: followed by the email address. Example: <a href="mailto:example@example.com">Email
Us</a>

Specified location: Use the target attribute to specify where to open the link. _blank for a new tab or window, _self
for the same tab or window, or a named window. Example: <a href="https://www.google.com"
target="_blank">Google</a>
<html>
<body>
<div id="section1">
<h1>This is Section 1</h1>
<a href="#section2">Go to Section 2</a><br>
<a href="contact.html">Contact Us</a><br>
<a href="https://www.google.com"
target="_blank">Google</a><br>
<a href="mailto:example@example.com">Email Us</a>
</div>
<div id="section2">
<h1>This is Section 2</h1>
<a href="#section1">Go back to Section 1</a>
</div>
</body>
</html>
Relative and Absolute File Paths

Relative File Paths


A relative file path specifies the location of a file or directory about the current location, or the
location of the file that references it

For instance, if an HTML file and an image are in the same directory, you can reference the image
in the HTML file using just its name (e.g., image.jpg)

Absolute File Paths


An absolute file path specifies the exact location of a file or directory, regardless of the current
location

It includes the entire path from the root directory to the file or directory in question

For instance, an absolute file path on a Windows system might look like C:\Users\Username\
Documents\image.jpg
Reasons Not to Use Absolute File Paths for Local Objects

Using absolute file paths for local web pages or objects can lead to broken links
when the website is moved to a different directory or server

The web page or object might not exist at the specified location on the server or
the user's computer

If a website is moved or backed up, absolute links will still point to the original
location, not the new or backup location
It is a saved shortcut that directs the browser to
a specific web page.
It stores the title, URL, and favicon of the
corresponding page Allows the user to easily
access favourite locations on the Web
The anchor is a link/placeholder/reference point within the webpage
The anchor links with another part of the web page
Hyperlink is a method of accessing another
document or resource from your current
application.
It can be a Word/phrase/image
When the hyperlink is clicked links to another
document page or either top or bottom of the
page

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy