02- Links, Structure and Layout with HTML.pdf

Link markup
▪ A link (or hyperlink) is a way to connect one webpage to another. Links also allow users to
jump to a different section of a webpage, download documents, and more.
▪ A link does not have to be text. A link can be an image or any other HTML element.
▪ Links are represented in HTML by the <a> (or anchor) tag.
▪ The <a> tag may include several attributes.
▪ Syntax: <a href="url">link text</a>
▪ By default, links will appear as follows in all browsers:
▪ An unvisited link is underlined and blue
▪ A visited link is underlined and purple
▪ An active link is underlined and red
Introduction to Web Programming - Links, Structure and Layout with HTML 4

Link markup

Attribute href
▪ A link takes users to a page on the same or a different website. So, we need to
include the attribute href, for hypertext reference.
▪ The value of the href attribute is the URL (Uniform Resource Locator) of the
destination. i.e., the page we are linking to.
▪ The enclosed content of the <a> element is typically some label text—usually the
name of the page the link will take the user to.
▪ This label is the only part of the link that the user sees.

Link creation
▪ To create a hyperlink, we follow the steps below:
▪ 1. In the HTML file, type <a to start the anchor element.
▪ 2. Type href=“[A URL]"> to define the destination of the link.
▪ 3. Type the link text (e.g., Visit Google) to provide a label for the user to click.
▪ 4. Type </a> to finish the link
▪ 5. Save the file and view it in your browser

Types of hyperlinks
Types of Links in
HTML
Links to different
pages in a
webpage (internal)
Links to specific
section of a page
Links to other
websites external
from our own
(external)
Links to other
applications

Internal VS. External linking
▪ Internal links are links to pages within the same website (or on the same domain).
▪ External links are links to someone else’s webpage.
▪ External links are always absolute. That is, they need to include the entire URL,
including the protocol. If one of those items is missing or incomplete, the link will not
work.
▪ When linking internally, we don’t always need to include the entire URL, because it’s
implied. This is the result of the difference between absolute and relative links.

External links
▪ With an absolute link, we can include the entire URL in the anchor element markup.

Relative VS. Absolute linking
▪ Example : Always use an absolute link when linking to an external site, but we
will usually use relative links for files on our own site.
▪ Absolute URLs
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
Consider the following link to apply an Absolute link:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
▪ Relative URLs
<p><a href="html_images.html">HTML Images</a></p>
<p><a href="/css/default.html">CSS Tutorial</a></p>
▪ Link to a page located in the html folder on the current web site:
<a href="/html/default.asp">HTML tutorial</a>
▪ Link to a page located in the same folder as the current page:
<a href="default.asp">HTML tutorial</a>

Types of relative links

Other types of links
▪ HTML links can be used to create bookmarks, so that readers can jump to specific
parts of a web page.
▪ Bookmarks can be useful if a web page is very long.
▪ Linking to a specific section of the page is a great way to highlight specific content or
drive a user to a pertinent area.
1. Assign a unique name to the section to which we are linking to, by including the id attribute.
<h3 id="contact">Contact Me!</h3>
2. Link to that id in the anchor tag:
<a href="#contact">Jump to Contact Form</a>

Other types of links
▪ Example of linking to a specific section of the page:

Linking to different destinations
▪ There is a growing set of Uniform Resource Identifiers (URIs) that tell the browser
which specific applications a link should open in.
▪ While email links are the most common, we can also specify telephone numbers (tel:),
file servers (ftp:), and more.
▪ Email links are links that will open an email app on the device, with the email
address (and potentially other information) filled in. To create an email link, the link is
structured as follows:
<a href="mailto:joe@casabona.org"> Email Joe </a>

Link targets
▪ By default, the linked page will be displayed in the current browser window. To change
this, we must specify another target for the link.
▪ The target attribute specifies where to open the linked document.
▪ Several link targets can be used in HTML:
▪ _blank opens the link in a new window.
▪ _self opens the link in the same window (the default).
▪ _parent: If the current page was opened in a new window, this type of target allows opening
subsequent links in the original window.
▪ _top opens the page in the full body of the window (useful if using the <iframe> element).
▪ An <iframe> is a way to embed the content of one page into another. That is for example
used when embeding a YouTube video on a page. framename opens the page in a
specific <iframe>.

Link targets
▪ To create a link that opens in a new window:
▪ 1. In the HTML file, type <a href= "https://google.com".
▪ 2. Type target="_blank">.
▪ 3. Type Visit Google</a>.
▪ 4. Save the file and open it in the browser. When clicking the link, it will open Google home
page in a new window.

Structure and Layout with HTML
▪ Aside from formatting text, HTML gives us a
set of tools for defining areas of a webpage.
▪ While they don’t affect the way a page looks
(that’s what CSS is for), it’s yet another way
to apply semantic meaning to webpages for
users.
▪ the items on a page are grouped into areas
with specific functions, such as a header, a
footer, a main area (which can contain
several elements), and a sidebar.
▪ Each of these boxes is an area defined in
HTML and styled with CSS. But the browser
knows how to arrange the areas thanks to
the HTML elements used to define them.
Figure. The layout for the New York Times home page

Block VS. Inline elements
▪ Block elements take up the full available width, thus creating their own block on a
page. Style-wise, each element fits into the box model and has its own spacing.
▪ Two commonly used block elements are: <p> and <div>.
▪ A paragraph is a block element.
▪ Example:
<p>Hello World</p>
<div>Hello World</div>

Block VS. Inline elements
▪ Inline elements take up only the width they need. Looking at this stylistically, by default
there is no spacing applied directly to inline elements. <strong>, <em>, and <a> are
all inline elements.
▪ An inline element does not start on a new line.
▪ Example:
▪ <span>Hello World</span>

Page sections
▪ A good way to get an idea of a page’s design and layout is to
sketch out a wireframe. A wireframe is a blueprint or a
general framework of a webpage.
▪ Its focus is on content priority and lacks the niceties of visual
design, like text styling or colors.
▪ A wireframe indicates where content and elements are
placed.
Figure.Awireframe of a webpage that uses
commonpage sections

Page sections
▪ The header is the area that contains information at the top of a webpage or section of a webpage. A
site’s header generally includes the site title and maybe a tagline or logo. Other elements, like
articles, can also have a header tag, which might include the title, date, and author’s name. The
navigation is also usually found in the header. The tag for this element is <header>.
▪ The navigation includes links to other important pages on the site. On a micro level, groups of pages
or articles can have their own navigation (if an article is spread across several pages, for example).
Its tag is <nav>.
▪ The footer is at the bottom of the page or section of a page and is generally used to provide extra
information. For a section of a page, it could display the date it was published or tags or keywords.
For the entire site, the footer can include additional links, copyrights, or other legal disclosures. Its
tag is <footer>.

Creating a site navigation
▪ Assume there are three pages: a home page (index.html), an about page (about.html),
and a contact page (contact.html).
▪ To create simple site navigation, we follow the steps below:
1. Type <nav to create the opening of the navigation element.
2. Type the attribute role="main" because this will be the page’s primary navigation element.
3. Type > to close the opening tag.
4. Type <ul> to begin the unordered list of links to other pages in the site.
5. Create a navigation item for the home page by typing <li><a href="index.html">Home
</a></li>.
6. Do the same for the about.html page; type <li><a href="about.html">About</a></li>.
7. Add the last link, for the contact.html page. Type
8. Type </ul>, then </nav>.

Section, article, aside, main
▪ With the more general areas of a website covered, the content may change with each
page.
▪ A section (tag: <section>) is any discrete area of a website with related content. For example,
on a home page there might be an “about me” section, an “articles” section, and a “photo
gallery” section.
▪ An article (tag: <article>) is an area that is often self-contained and can stand on its own (and
is often related to syndication). Blog posts or a page’s main copy are usually described as
articles.
▪ An aside (tag: <aside>) is auxiliary information that’s related to, but not integral to, the main
content. Asides are often described as “sidebars,” but they don’t need to be physically to the
side of the content. The tips in a web page can be considered asides.
▪ To match the aside tag, there’s also a <main> tag, which would denote the main content of
the page. This will likely be a wrapper for articles or sections.

Building a blog article layout
▪ To create a page header:
1. Type <header to </headeropen the header tag.
2. Type role="banner".
3. Type > to close the opening header tag.
4. On a new line, type <h1 id="site-title">Welcome to my Site!</h1>.
5. We’ve added the ID site-title to tell browsers and search engines “this is the name of the
site.”
6. Add the navigation created earlier in this chapter.
7. Type > to close the page header tag.

Creating the main section
▪ To create the main article section, follow the steps below:
1. Open the wrapper for the content by typing <div class="wrapper">. You’re opening the wrapper
div element here, but you’ll close it when we create the <aside> element.
2. Open the main section by typing <main>.
3. Type <article>.
4. Type <header> to open the article’s header.
5. Add a headline using the <h2> tag: type <h2>10 Reasons HTML is so great!</h2>. Use an h2
tag here because the site title should be the only h1 on the page.
6. Type </header>.
7. Type all of the content for the article. This should include text like paragraphs, lists, images, and
hyperlinks.
8. Type <footer> to open the article’s footer.
9. The publish date will go here. Type <p>Published March 6 at 11:06pm</p>.
10. Type </footer>.
11. Type </article> and then </main> to close out the rest of the elements.

Creating a sidebar
▪ To create a sidebar:
1. Type <aside>.
2. Type the heading <h3>Related Articles </h3>.
3. Created an unordered list of articles. Type <ul>.
4. Add the first item: type <li><a
href="/articles/css.html">Wait until you see
CSS</a></li>.
5. Add as many related articles as we’d like.
6. Type </ul>.
7. Type </aside> to close the aside element.
8. Type </div> to close the wrapper div.
<Example of side navigation -->
<div class="sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>

<div class="main">
...
</div>

Creating a site footer
▪ To create a site footer:
1. Type <footer>.
2. Add one paragraph for the copyright line. Type <p>Copyright
3. [AUTHOR NAME]</p>.
4. Type </footer>.
Example of a footer section in a document:
<footer>
<p>Author: Haithem Mezni</p>
<p><a href="mailto:hmezni@taibahu.edu.sa">
hmezni@taibahu.edu
</a>
</p>
</footer>

02- Links, Structure and Layout with HTML.pdf

More Related Content

Similar to 02- Links, Structure and Layout with HTML.pdf (20)

Recently uploaded (20)

02- Links, Structure and Layout with HTML.pdf