Scribd
Hochladen
6 Ansichten39 Seiten

HTML Web Dev

HTML WEB DEV NOTES

Hochgeladen von

Hilda Ben
Copyright
© All Rights Reserved
Wir nehmen die Rechte an Inhalten ernst. Wenn Sie vermuten, dass dies Ihr Inhalt ist, beanspruchen Sie ihn hier.
Verfügbare Formate
Als PDF, TXT herunterladen oder online auf Scribd lesen
6 Ansichten39 Seiten

HTML Web Dev

HTML WEB DEV NOTES

Hochgeladen von

Hilda Ben
Copyright
© All Rights Reserved
Wir nehmen die Rechte an Inhalten ernst. Wenn Sie vermuten, dass dies Ihr Inhalt ist, beanspruchen Sie ihn hier.
Verfügbare Formate
Als PDF, TXT herunterladen oder online auf Scribd lesen

Topic Two

Contents
INTERNET AND WEB TECHNOLOGY .......................................................................... 1
2. HTML (Hypertext Markup Language): ....................................................................... 1
a. Designing Webpages Process ...................................................................................... 1
b. Structuring HTML and Basic Input Tags: ................................................................... 5
i) The DOCTYPE Identifier......................................................................................... 5
ii) The <html> Tag ....................................................................................................... 6
iii) The <head> Tag ..................................................................................................... 6
iv) The <title> Tag ....................................................................................................... 6
v) The <body> Tag ...................................................................................................... 7
c. Basic Tags .................................................................................................................... 7
i) Headings ................................................................................................................... 7
ii) Paragraphs ............................................................................................................... 7
iii) HTML Horizontal Rules ........................................................................................ 8
iv) HTML Line Breaks ................................................................................................ 8
v) Links ........................................................................................................................ 8
vi) Images ..................................................................................................................... 9
vii) Lists ..................................................................................................................... 15
viii) HTML Formatting Elements .............................................................................. 17
ix) Tables ................................................................................................................... 18
x) Forms ..................................................................................................................... 21
d. Webpage Structure ..................................................................................................... 25
e. HTML Block and Inline Elements ............................................................................. 32
f. Group Content with Divs and Spans .......................................................................... 33
g. Add Classes and Ids to elements ................................................................................ 36
h. HTML Comment Tags ............................................................................................... 38
INTERNET AND WEB PAGE AUTHORIZATION

INTERNET AND WEB TECHNOLOGY

2. HTML (Hypertext Markup Language):


HTML stands for Hypertext Markup Language. It is the language for building web pages.

 HTML5 is the current active specification for HTML, or Hypertext Markup Language.
 HTML forms the content layer of the web, providing a way to structure information in a way
that can be rendered by browsers and processed by search engine crawlers.
 HTML5 was initially released in 2008, and has added additional features since then. It
improves on earlier versions by enabling native multimedia content, support for SVG and
MathML vector graphics, and new semantic document elements.
 HTML is useful on its own, but much of its power is unlocked by the web’s other layers. CSS
is the styling layer that determines how this content is displayed. JavaScript is the behavior
layer that allows user interaction and dynamic data manipulation.

a. Designing Webpages Process

1. Goal identification
In this initial stage, the designer needs to identify the end goal of the website design, usually in
close collaboration with the client or other stakeholders. Questions to explore and answer in
this stage of the design and website development process include:
Who is the site for? What do they expect to find or do there? Is this website’s primary aim to
inform, to sell (ecommerce, anyone?), or to amuse? Does the website need to clearly convey a
brand’s core message, or is it part of a wider branding strategy with its own unique focus? What
competitor sites, if any, exist, and how should this site be inspired by/different than, those
competitors?
Tools for website goal identification stage
Audience personas, Creative brief, Competitor analyses, Brand attributes

2. Scope definition
One of the most common and difficult problems plaguing web design projects is scope creep.
The client sets out with one goal in mind, but this gradually expands, evolves, or changes

1
INTERNET AND WEB PAGE AUTHORIZATION

altogether during the design process — and the next thing you know, you’re not only designing
and building a website, but also a web app, emails, and push notifications.
If the increased expectations aren’t matched by an increase in budget or timeline, the project
can rapidly become utterly unrealistic.

Tools for scope definition


A contract, Gantt chart (or other timeline visualization)

3. Sitemap and Wireframe Creation


A sitemap (also called an XML sitemap) is a structured list of website content, including all
forms of media, that is set up to be comprehensively read and indexed by search engines. An
HTML sitemap may be used to serve as a visual aid for human website navigation. It may be
included as a website page, or simply as a navigation tool.

The next step is to find some design inspiration and build the wireframe. Wireframes provide
a framework for storing the site’s visual design and content elements, and can help identify
potential challenges and gaps with the sitemap.
Tools for sitemapping and wireframing
Pen/pencil and paper, Balsamiq, Moqups, Sketch, Axure, Webflow

4. Content Creation
Content serves two essential purposes:
Purpose 1. Content drives engagement and action

2
INTERNET AND WEB PAGE AUTHORIZATION

First, content engages readers and drives them to take the actions necessary to fulfill a site’s
goals. This is affected by both the content itself (the writing), and how it’s presented (the
typography and structural elements).
Purpose 2: SEO
Content also boosts a site’s visibility for search engines. The practice of creation and improving
content to rank well in search is known as search engine optimization, or SEO.
Getting your keywords and key-phrases right is essential for the success of any website.
Awesome content creation tools
Google Docs, Dropbox Paper, Quip, Gather Content, Webflow CMS (content management
system)
5. Visual Elements
Finally, it’s time to create the visual style for the site. This part of the design process will often
be shaped by existing branding elements, color choices, and logos, as stipulated by the client.
Images are taking on a more significant role in web design now than ever before. Not only do
high-quality images give a website a professional look and feel, but they also communicate a
message, are mobile-friendly, and help build trust.
A mockup is the equivalent of a printed version of your website that allows customers to see
all the visual aspects of the proposed site, the overall layout, details such as colors, fonts, some
images, icons, logos, and the list goes on!
Imagine printing out a website before the website itself has even been built. Mockups are
created after a thorough study of a client's needs, a process which is often accompanied by
something called a spec sheet.
A spec sheet is a document that lists customer needs as well as the eventual process you will
adopt to end up with a final result. It is extremely important to have one to make sure that you
and your client are working towards the same goal.
Tools for visual elements
The usual suspects (Sketch, Illustrator, Photoshop, etc.), Moodboards, style tiles, element
collages, Visual style guides

3
INTERNET AND WEB PAGE AUTHORIZATION

The mockup and spec sheet combination is great because it allows the customer and developer
to be very much on the same page in terms of project and planning. For developers, this is
especially great, since many of the important website design and layout choices have already
been made!
Devise a simple, consistent naming system for your pages, images and other external files.

6. Deconstruct a Mockup into an HTML


The first step after receiving a mockup is to deconstruct it into an HTML element. You'll start
by breaking down the elements that compose the header, the page body, and the footer if there
is one.

4
INTERNET AND WEB PAGE AUTHORIZATION

b. Structuring HTML and Basic Input Tags:


The idea here is that most documents have common elements for example, titles, paragraphs,
and lists. Before you start writing, therefore, you can identify and define the set of elements in
that document and give them appropriate names.
Writing in a markup language means that you start with the text of your page and add special
tags around words and paragraphs. The tags indicate the different parts of the page and produce
different effects in the browser. HTML has a defined set of tags you can use. You cannot make
up your own tags to create new styles or features.

What HTML Files Look Like


Any editor that supports text can read HTML. HTML files contain the following:
• The text of the page itself
• HTML tags that indicate page elements, structure, formatting, and hypertext links to
other pages or to included media. Most HTML tags look something like the following:
<tagname>text</tagname>
The tag name itself (here, tagname) is enclosed in brackets (< >). HTML tags generally have a
beginning and an ending tag surrounding the text they affect. The beginning tag "turns on" a
feature (such as headings, bold, and so on), and the ending tag turns it off. Closing tags have
the tag name preceded by a slash (/). The opening tag (for example, <p> for paragraphs) and
closing tag (for example, </p> for paragraphs) compose what is officially called an HTML
element.

i) The DOCTYPE Identifier


First, we have the Document Type Declaration, or doctype. All HTML documents must start
with a document type declaration: <!DOCTYPE html>. This is simply a way to tell the browser
or any other parser what type of document it’s looking at. In the case of HTML files, it means
the specific version and flavor of HTML. The doctype should always be the first item at the
top of any HTML file. This is followed by the <html>, <head>, and <body> tags.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
5
INTERNET AND WEB PAGE AUTHORIZATION

<body>
Page Content
</body>
</html>

ii) The <html> Tag


The HTML document itself begins with <html> and ends with </html>. The <html> element
is the root element and it defines the whole HTML document.
<!DOCTYPE html>
<html>
...your page...
</html>

iii) The <head> Tag


The head will contain information about the page.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title. It will be explained later on</title>
</head>
...your page...
</html>

iv) The <title> Tag


Each HTML page needs a title to indicate what the page describes. It appears in the title bar of
the browser when people view the web page.
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
...your body

6
INTERNET AND WEB PAGE AUTHORIZATION

</body>
</html>

v) The <body> Tag


The visible part of the HTML document is between <body> and </body>. It has a start tag
<body> and an end tag </body>.

<!DOCTYPE html>
<html>
<head>
<title>This is the Title</title>
</head>
<body>
...your page...
</body>
</html>

c. Basic Tags
i) Headings
Headings are used to add titles to sections of a page. HTML defines six levels of headings.
They are defined with the <h1> to <h6> tags.
Heading tags look like the following:
<h1>Heading 1</h1>
<h2> Heading 2</h2>
<h3> Heading 3</h3>
<h4> Heading 4</h4>
<h5> Heading 5</h5>
<h6> Heading 6</h6>

ii) Paragraphs
A paragraph always starts on a new line, and is usually a block of text and browsers
automatically add some white space (a margin) before and after a paragraph. HTML paragraphs
are defined with the <p> tag. Paragraph tags are two-sided (<p>...</p>), <p>indicates the

7
INTERNET AND WEB PAGE AUTHORIZATION

beginning of the paragraph and </p> (the closing tag) indicates where one paragraph ends.
Example: <p>This is some text.</p>

iii) HTML Horizontal Rules


The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule. It is used to separate content in an HTML page.
Example:
<h1>This is first heading </h1>
<p>This is my first paragraph</p>
<hr>
<h2>This is second heading </h2>
<p>This is my second paragraph</p>

iv) HTML Line Breaks


The HTML <br> element defines a line break. Use <br> if you want a line break (a new line)
without starting a new paragraph.
Example
<p>This is<br>a paragraph<br>with line breaks. </p>

v) Links
HTML links are hyperlinks. To create a link in an HTML page, you use the HTML link tag
<a>...</a>. The <a> tag often is called an anchor tag because it also can be used to create
anchors for links. It allows you can click on a link and jump to another document.
Note: A link does not have to be text. It can be an image or any other HTML element.
Syntax: <a href="url">link text</a>
Examples
Local Link:
Go back to <a href="[Link]">Main Menu</a> Links you to the same website.
External Link:
<a href="[Link] Google for more. </a> Links you to different website.

HTML Links - The Target Attribute

8
INTERNET AND WEB PAGE AUTHORIZATION

The target attribute specifies where to open the linked document. The target attribute can have
one of the following values:
 _blank - Opens the linked document in a new window or tab
 _self - Opens the linked document in the same window/tab as it was clicked (this is default)
 _parent - Opens the linked document in the parent frame
 _top - Opens the linked document in the full body of the window
 framename - Opens the linked document in a named frame

vi) Images
A picture is worth a thousand words! That's why you'll likely include images in your web pages
at some point, whether it's to display a user's profile picture, show a vacation photo, add some
visual enhancement to an article, or something else!
In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains
attributes only, and does not have a closing tag.
Syntax: <img src="url">
Example:
<img src="[Link]
[Link]" alt="Astronaut Millie Hughes-Fulford displays the modernist Blackburn &
Danne NASA logotype." title="Millie Hughes-Fulford"
Output:

9
INTERNET AND WEB PAGE AUTHORIZATION

Image Attributes
1. The src attribute

The first attribute to include in an <img> element is src. The contents of the src attribute
indicate where the image is stored. An image can be loaded from:

 A URL that's already online (like an image on another website)


 A file that's loaded from elsewhere in your codebase
Either way, you're loading a file. The only difference is how you describe its location. Take
the above photo as an example.

Pay attention to the If you loaded the image from Wikimedia directly, you could write the
following within your img tag:

src="[Link]

If you saved the image among your own files, you could write:

src="images/[Link]"

10
INTERNET AND WEB PAGE AUTHORIZATION

There's no http:// or https:// in the second example, meaning you're probably working with a
file in your own project; not one hosted elsewhere on the web.
Storing images in among your own files is a good habit to get into (but only if you have the
rights to the image! More on that in the next chapter). Even if Wikimedia were to remove the
image above from their site or change the link, you'd still have it in your own files and would
thus be spared the embarrassment of a broken image.

It is common to save images in a folder called images that lives within your website project.
We'll see this later in the course.

2. The alt attribute

Once you have told the <img> tag where the image is located (via the src attribute), you must
add a description of the image within another attribute: alt.

Think of "alt" like "alternative text." The alt attribute provides an alternate text for an image,
if the user for some reason cannot view it (because of slow connection, an error in the src
attribute, or if someone is using a screen reader and can't see your image with their eyes, they
will see the descriptive text of the image instead). So will search engines, which is important
for SEO.

SEO stands for Search Engine Optimization, which is concerned with, among other things,
improving the quality and the quantity of user traffic to websites.
A good alt text to describe the Millie Hughes-Fulford photo would be: "Astronaut Millie
Hughes-Fulford displays the modernist Blackburn & Danne NASA logotype." It's sufficiently
descriptive so that even users who can't see your page won't miss any of the important
information contained in the photo!

However, if an image truly adds no additional information to the page and is purely
decorative, you can leave the quotation marks empty (like for a decorative dot image):

<img src="images/[Link]" alt="">

11
INTERNET AND WEB PAGE AUTHORIZATION

3. The title attribute

The title of your image appears when a user hovers over the image itself, as in the Millie
Hughes-Fulford image above. See how hovering with the cursor brings up the contents of the
title attribute?

Hovering over an image will show contents of the title attribute


Nonetheless, the "alt" attribute is more important than the title attribute, so if you only have a
limited amount of time, just short-hand your title and work on a great alt description instead.
Figures
Now that you know how to insert images plain and simple, HTML also offers
a specific kind of image tag for figures. A figure is an image that could be moved around
in your web page without dramatically altering the "flow" of the page. This is similar to
how we think of figures in an encyclopedia, for example. Because they're labelled, they
can be next to one paragraph or another, and it doesn't really matter.

Figures also allow for captions. Fun fun! To insert a figure, surround your <img> tag with
two other tags: <figure> and <figcaption>.

<figure>

<img src="[Link]
[Link]" alt="Astronaut Millie Hughes-Fulford displays the modernist Blackburn &
Danne NASA logotype." title="Millie Hughes-Fulford">

<figcaption>Millie Hughes-Fulford</figcaption>

12
INTERNET AND WEB PAGE AUTHORIZATION

</figure>

Result
Use the best images possible

Using <figure> is a great way to write semantically wonderful HTML. "Figure" is more
descriptive than "image", so if figure suits your content, it's a good choice to use it.

When adding images to your code, there are a few things to bear in mind, like intellectual
property and file formats/sizes that ensure the best browsing experience.

Finding images

As you continue building websites, you'll have opportunities to add many different kinds of
images. Some, you can make yourself. You can create charts to show relevant figures, use your
own photography for an article, mark up screenshots to illustrate a concept, or hand-draw
illustrations to accompany a story.

Some images, you just can't get yourself, though. This is not an excuse to use copyrighted
images without attribution or photographs that aren't yours.

13
INTERNET AND WEB PAGE AUTHORIZATION

Stock images are a safe choice when you're in a tight spot and need visuals to accompany your
text! Here are some solid options if you need stock photos:

Adobe Stock (they often have free trials running): [Link]

Shutterstock: [Link]

iStock: [Link]

Getty Images: [Link]

Fotolia: [Link]

Picography (free, more niche/hipster): [Link]

Now that you have the resources where you can find the perfect image(s) for your needs, let's
do a brief rundown of image formats.

Image formats

It is good that images should often be saved in their own folder in their codebase. There are
several different image formats (otherwise known as file types) available, and you should be
sure to save or use image with the one most suited to your page's needs:

JPEG

Most digital cameras save photos in JPEG or JPG (they're the same thing) format because it
can blend red, green, and blue to produce many colors. JPEG is a good format to use when
adding a photo with many colors or with photography in general. After all, the JPEG stands for
Joint Photographic Experts Group. Sample image files could be winter_landscape.jpg or
family_portrait.jpeg .

GIF

Everyone loves animated GIFs. That's because this file type is perfect for animated images. It's
less suited to photography though because it can't handle as many colors. You can still use it
for still photos with very few colors, like simple logos. It also allows for transparency, which
JPEGs do not. A sample image file could be brand_logo.gif or dancing_bear.gif .

PNG

14
INTERNET AND WEB PAGE AUTHORIZATION

There are two different types of PNG formats, PNG-8 and PNG-24. The latter allows for more
colors, but both formats allow transparency and do not result in quality loss when saved over
and over again (unlike JPEGs). PNG stands for Portable Network Graphics. A sample image
file could be simple_illustration.png or transparent_background_cutout.png.

SVG

If the name "Scalable Vector Graphics" doesn't give it away, SVG images are vector images.
They can be scaled up or down and not lose any quality. However, they're only suited to simple
images like logos or flags. Sample image files could be [Link] or american_flag.svg .

One of the most important things you can do when building great web pages is to keep your
image sizes reasonable and to measure your images in pixels. If you want to show an image at
a size of 200px by 200px, it should be saved at that size. This will help your pages load faster!

vii) Lists
HTML lists allow web authors to group a set of related items in lists. HTML defines
these three types of lists:
• Numbered or ordered lists, which are typically labeled with numbers
• Bulleted or unordered lists, which are typically labeled with bullets or some other
symbol
• Description lists, in which each item in the list has a term and a definition for that term,
arranged so that the term is somehow highlighted or drawn out from the text
List Tags
All the list tags have the following common elements:
• The entire list is surrounded by the appropriate opening and closing tag for the type of list
(for example, <ul> and </ul> for unordered lists, or <ol> and </ol> for ordered lists).
• Each list item within the list has its own tag:
<dt> and <dd> for the glossary lists, and <li> for all the other lists.
Ordered Lists
The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
Input
<p>Installing Your New Operating System</p>
<ol>

15
INTERNET AND WEB PAGE AUTHORIZATION

<li>Insert the CD-ROM into your CD-ROM drive.</li>


<li>Choose RUN.</li>
<li>Enter the drive letter of your CD-ROM (example: D:\), followed by
[Link].</li>
<li>Follow the prompts in the setup program.</li>
<li>Reboot your computer after all files are installed.</li>
</ol>
Customizing Ordered Lists
You can customize ordered lists in two main ways: how they're numbered and the number with
which the list starts. HTML provides the type attribute that can take one of five values to define
which type of numbering to use on the list:
 "1" Specifies that standard Arabic numerals should be used to number the list (that is, 1, 2, 3,
4, and so on)
 "a" Specifies that lowercase letters should be used to number the list (that is, a, b, c, d, and so
on)
 "A" Specifies that uppercase letters should be used to number the list (that is, A, B, C, D, and
so on)
 "i" Specifies that lowercase Roman numerals should be used to number the list (that is, i, ii, iii,
iv, and so on)
 "I" Specifies that uppercase Roman numerals should be used to number the list (that is, I, II,
III, IV, and so on)
You can specify types of numbering in the <ol> tag, as follows: <ol type="a">. By default,
type="1" is assumed.
Input
<p>The Days of the Week in French:</p>
<ol type="I">
<li>Lundi</li>
<li>Mardi</li>
<li>Mercredi</li>
<li>Jeudi</li>
<li>Vendredi</li>
<li>Samedi</li>
<li>Dimanche</li>
</ol>
16
INTERNET AND WEB PAGE AUTHORIZATION

Input
<p>The Last Six Months of the Year (and the Beginning of the NextYear):</p>
<ol type="I" start="7">
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
<li type="1">January</li>
</ol>

Unordered HTML List


The HTML <ul> tag defines an unordered (bulleted) list. An unordered list starts with the <ul>
tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small
black circles) by default:
Example
<p>Countries</p>
<ul>
<li>Tanzania</li>
<li>Kenya</li>
<li>Uganda</li>
</ul>
Description Lists
A description list is a list of terms, with a description of each term. The <dl> tag defines the
description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:
<dl>
<dt>Dar es salaam</dt>
<dd>Kinondoni, Ilala, Temeke</dd>
<dt>Mbeya</dt>
<dd>Kyela, Mbeya, Mbarali</dd>
</dl>
viii) HTML Formatting Elements
Formatting elements were designed to display special types of text:
17
INTERNET AND WEB PAGE AUTHORIZATION

 <b> - Bold text


The HTML <b> element defines bold text, without any extra importance.
Example: <b>This text is bold</b>
 <strong> - Important text
The HTML <strong> element defines text with strong importance. The content inside
is typically displayed in bold.
Example: <strong>This text is important!</strong>
 <i> - Italic text
The HTML <i> element defines a part of text in an alternate voice or mood. The content
inside is typically displayed in italic. The <i> tag is often used to indicate a technical
term, a phrase from another language, a thought, a ship name, etc.
Example
<i>This text is italic</i>
 <em> - Emphasized text
The HTML <em> element defines emphasized text. The content inside is typically
displayed in italic. A screen reader will pronounce the words in <em> with an emphasis,
using verbal stress.
Example: <em>This text is emphasized</em>
 <mark> - Marked text
The HTML <mark> element defines text that should be marked or highlighted:
Example: <p>Do not forget to buy <mark>milk</mark> today.</p>
 <small> - Smaller text
The HTML <small> element defines smaller text:
Example: <small>This is some smaller text.</small>

ix) Tables

Table Parts
Before getting into the actual HTML code to create a table, let's look at the following terms so
that we both know what we're talking about:
• The caption indicates what the table is about: for example, "Voting Statistics" or "Toy
Distribution Per Room" Captions are optional.
• The table headings label the rows, columns, or both. Usually they're in an emphasized font
that's different from the rest of the table. They're optional.
18
INTERNET AND WEB PAGE AUTHORIZATION

• Table cells are the individual squares in the table. A cell can contain normal table data or a
table heading.
• Table data is the values in the table itself. The combination of the table headings and table
data makes up the sum of the table.
The <table> Element
The to create a table in HTML, you use <table>...</table> element to enclose the code for an
optional caption, and then add the contents of the table itself:
<table>
...table caption (optional) and contents...
</table>
Rows and Cells
The cells within each row are created using one of two elements:
• <th>...</th> elements are used for heading cells. Generally, browsers center the contents
of a <th> cell and render any text in the cell in boldface.
• Each table row is defined with the <tr> tag
• <td>...</td> elements are used for data cells. TD stands for table data.
Input
<table>
<tr>
<th>Name</th>
<td>Alison</td>
<td>Tom</td>
<td>Susan</td>
</tr>
<tr>
<th>Height</th>
<td>5'4"</td>
<td>6'0"</td>
<td>5'1"</td>
</tr>
<tr>
<th>Weight</th>
<td>140</td>
<td>165</td>
19
INTERNET AND WEB PAGE AUTHORIZATION

<td>97</td>
</tr>
</table>
Setting Table Widths
To make a table as wide as the browser window, you add the width attribute to the table, as
shown in the following line of code:
<table border="1" width="100%">
Changing Table Borders
You can change the width of the border drawn around the table. If border has a numeric value,
the border around the outside of the table is drawn with that pixel width. The default is
border="1". border="0" suppresses the border, just as if you had omitted the border attribute
altogether.
Input
<table border="10" width="100%">
Cell Padding
The cell padding attribute defines the amount of space between the edges of the cells and the
content inside a cell.
Input
<table cellpadding="10" border="1">
Cell Spacing
Cell spacing is similar to cell padding except that it affects the amount of space between
cells that is, the width of the space between the inner and outer lines that make up the
table border.
Input
<table cellpadding="10" border="4" cellspacing="8">
Spanning Multiple Rows or Columns
The tables you've created up to this point all had one value per cell or the occasional empty
cell. You also can create cells that span multiple rows or columns within the table.
Those spanned cells then can hold headings that have subheadings in the next row or column
or you can create other special effects within the table layout.
Input
<!DOCTYPE html>
<html>
<head>
20
INTERNET AND WEB PAGE AUTHORIZATION

<title>Row and Column Spans</title>


</head>
<body>
<table border="1" summary="span example">
<tr>
<th colspan="2">Gender</th>
</tr>
<tr>
<th>Male</th>
<th>Female</th>
</tr>
<tr>
<td>15</td>
<td>23</td>
</tr>
</table>
</body>
</html>

x) Forms
HTML Forms are required, when you want to collect some data from the site visitor. For
example, during user registration you would like to collect information such as name, email
address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application such
as CGI, ASP Script or PHP script etc. The back-end application will perform required
processing on the passed data based on defined business logic inside the application.
There are various form elements available like text fields, textarea fields, drop-down menus,
radio buttons, checkboxes, submit buttons and more. To accept input from a user, you must
wrap all of your input fields inside a <form> tag.
The purpose of the <form> tag is to indicate where and how the user's input should be sent.
First, let's look at how the <form> tag affects page layout. Forms are block-level elements.

The <input> Element

21
INTERNET AND WEB PAGE AUTHORIZATION

The <input> element is the most important form element. The <input> element is displayed in
several ways, depending on the type attribute.
Examples:
<input type="text"> Defines a single-line text input field
<input type="radio"> Defines a radio button (for selecting one of many choices)
<input type="submit"> Defines a submit button (for submitting the form)

Form Attributes
The two most commonly used attributes of the <form> tag are action and method. Both of these
attributes are optional. The following example shows how the <form> tag is typically used:
<form action="someaction" method="get or post">
content, form controls, and other HTML elements
</form>
Action specifies the URL to which the form is submitted. Again, remember that for the form
to be submitted successfully, the script must be in the exact location you specify and must work
properly.
The method attribute supports two values: get or post. The method indicates how the form data
should be packaged in the request that's sent back to the server.
The GET method appends the form data to the URL in the request. Always use POST if the
form data contains sensitive or personal information. The POST method does not display the
form data in the page address field.
Other form attribute
Target
Specify the target window or frame where the result of the script will be displayed. It takes
values like _blank, _self, _parent etc.
Enctype

You can use the enctype attribute to specify how the browser encodes the data before it sends
it to the server. Possible values are −
application/x-www-form-urlencoded − This is the standard method most forms use in simple
scenarios.
mutlipart/form-data − This is used when you want to upload binary data in the form of files
like image, word file etc.

22
INTERNET AND WEB PAGE AUTHORIZATION

Creating Text Controls


Text controls enable you to gather information from a user in small quantities. This control
type creates a single-line text input field in which users can type information, such as their
name or a search term.
Input
<p>Enter your pet's name:
<input type="text" name="petname" />
</ p>
Following is the list of attributes for <input> tag for creating text field.
i. Type
Indicates the type of input control and for text input control it will be set to text.
ii. Name
Used to give a name to the control which is sent to the server to be recognized and get the
value.
iii. Value
This can be used to provide an initial value inside the control.
iv. Size
Allows to specify the width of the text-input control in terms of characters.
v. Maxlength
Allows to specify the maximum number of characters a user can enter into the text box.

Creating Password Controls


The password and text field types are identical in every way except that the data entered in a
password field is masked so that someone looking over the shoulder of the person entering
information can't see the value that was typed into the field.
Example
<p>Enter your password: <input type="password" name="userpassword" size="8"
maxlength="8" /></p>

Creating Submit Buttons


Submit buttons are used to indicate that the user is finished filling out the form. Setting the type
attribute of the form to submit places a submit button on the page with the default label
determined by the browser, usually Submit Query. To change the button text, use the value
attribute and enter your own label, as follows:
23
INTERNET AND WEB PAGE AUTHORIZATION

<input type="submit" value="Send Form Data" />

Creating Reset Buttons


Reset buttons set all the form controls to their default values. These are the values included in
the value attributes of each field in the form (or in the case of selectable fields, the values that
are preselected). As with the Submit button, you can change the label of a Reset button to one
of your own choosing by using the value attribute, like this:
<input type="reset" value="Clear Form" />

Creating Check Box Controls


Check boxes are fields that can be set to two states: on and off. To create a check box, set
the input tag's type attribute to checkbox. The name attribute is also required, as shown in
the following example:
Input
<p>Check to receive SPAM email <input type="checkbox" name="spam" /></p>
Creating Radio Buttons
Radio buttons, which generally appear in groups, are designed so that when one button in the
group is selected, the other buttons in the group are automatically unselected. They enable you
to provide users with a list of options from which only one option can be selected. To create a
radio button, set the type attribute of an <input> tag to radio. To create a radio button group,
set the name attributes of all the fields in the group to the same value. To create a radio button
group with three options, the following code is used:
Input
<p>Select a color:<br />
<input type="radio" name="color" value="red" /> Red<br />
<input type="radio" name="color" value="blue" /> Blue<br />
<input type="radio" name="color" value="green" /> Green<br />
</p>

Creating Menus with select and option


The select element creates a menu that can be configured to enable users to select one or more
options from a pull-down menu or a scrollable menu that shows several options at once. The
<select> tag defines how the menu will be displayed and the name of the parameter associated
with the field. The <option> tag is used to add selections to the menu. The default appearance
24
INTERNET AND WEB PAGE AUTHORIZATION

of select lists is to display a pull-down list that enables the user to select one of the options.
Here's an example of how one is created:
Input
<p>Please pick a travel destination:
<select name="location">
<option>Dar es Salaam</option>
<option>Mbeya</option>
<option>Iringa</option >
<option>Arusha</option>
</select>
</p>

d. Webpage Structure
When you build a house, you start by building a structure first, and then filling in the smaller
elements, right? The same is true when building a web page!

What do the New York Times, Wikipedia, and Airbnb website have in common? They can all
be broken down into predictable blocks. You could actually name almost any website, and you
could break down the site into remarkably predictable sections. Developers write HTML in a
way that permits consistent content structure across the entire web. This reduces cognitive
work for users and makes different sites display reliably across browsers, screen readers, and
search engines.

Check out the following examples and note their different sections:

25
INTERNET AND WEB PAGE AUTHORIZATION

New York Times page structure

26
INTERNET AND WEB PAGE AUTHORIZATION

Airbnb page structure

Wikipedia page structure

Three different sites, but they all use the same structural elements, or zones: headers, navigation
areas, sections, and articles.

For example, if you look at the New York Times, they use the nav for browsing sections,
searching for an article, or accessing membership options and account settings. On Airbnb, the
nav allows you become a host or access your account settings. The navigation bars are suited
to each site's content but are not fundamentally different.

Additionally, websites often rearrange their content blocks when viewed on mobile devices
and tablets. You'll often notice articles or smaller content pieces stacking vertically on smaller
screen sizes.

Structural elements in HTML include:

 <header>: the section at the top of a web page that often includes a logo and sometimes a nav
 <nav>: a set of menu items that allow a user to navigate to different pages on a site
 <section>: a general section of related content
 <article>: a piece of content that can be independently shared, like a blog post or newspaper
article (even if you don't display the full article text, like you just show a preview, you can still
use an article tag to delineate this content)

27
INTERNET AND WEB PAGE AUTHORIZATION

 <footer>: the section at the bottom of a page that often has additional links and perhaps social
sharing icons
 <aside>: content that is complementary but not crucial to the page's main content (this could
be an informative side section on a related subject)
 <figure>: a grouped image and caption that create an informative visual of some kind
Let's look at a very generic desktop page structure first:

Possible desktop site structure

The page is pretty wide. Now let's look at a real-life example. You can see that on the website
Etsy, content does indeed have a layout that spreads out from left to right:

28
INTERNET AND WEB PAGE AUTHORIZATION

Desktop view of Etsy (elements are laid out widely)

On the other hand, mobile views often "stack" elements vertically so they take up less
horizontal space.

29
INTERNET AND WEB PAGE AUTHORIZATION

Possible mobile site structure


On this mobile view of Etsy, content indeed stacks more vertically than in the previous
screenshot of the desktop view.

30
INTERNET AND WEB PAGE AUTHORIZATION

Mobile view of Etsy (elements are laid out widely)


This is the core of semantic HTML: your code should match your content! The sooner you start
thinking in terms of content zones as presented above, the better your HTML will be and the
more you can adapt your CSS to make your site look differently on desktop, mobile, and more.

Structural HTML tags


Earlier in this course, you saw that to create an HTML element (like a heading), you use a set
of opening and closing tags. For example, the following tags will create a heading ("h1"):

<h1>Camping essentials</h1>

The format is exactly the same for creating structural elements like sections or footers. The
following tags create the structural elements in the website examples above:

31
INTERNET AND WEB PAGE AUTHORIZATION

<header>

<!--content-->

</header>

<nav>

<!--content-->

</nav>

<section>

<!--content-->

</section>

<article>

<!--content-->

</article>

<footer>

<!--content-->

</footer>

e. HTML Block and Inline Elements


Every HTML element has a default block-level or inline behavior, depending on what type of
element it is. Paragraphs are block-level elements, which means that they block off a whole
line for themselves, and images are inline elements, which means they will automatically be
placed next to one another on the same line.

32
INTERNET AND WEB PAGE AUTHORIZATION

Block-level elements that you've seen so far include:

 Headings
 Paragraphs (p)
 Lists and list items (ul, ol, li)
 Structuring elements (header, nav, section, article, aside, figure, footer)
Inline elements that you've seen so far include:

 Images (img)
 Emphasized text (em)
 Strong text (strong)
 Links (a)

f. Group Content with Divs and Spans


The difference between divs and spans is simple: one is block-level, and the other is inline.
Divs
Divs are a block-level element used to group content together, not dissimilar to <header>,
<nav>, <section>, <article>, <footer>, <figure>, and <aside> which you've already seen
in this course. There's one key difference, though.

33
INTERNET AND WEB PAGE AUTHORIZATION

Most of the time, when you want to group content together, you'll be able to do it using an
HTML5 semantic element like header, nav, section, article, footer, figure, or aside. However,
sometimes your content doesn't really fit any of these categories! In that case, you're
encouraged to use divs to create block-level content groups.

Take the following web page screenshot:

One heading and four paragraphs, two of which have a dark green background and small text

The dark green disclaimer block isn't really a full section, nor is it an article, footer, nav, etc.
Nonetheless, its two paragraphs need to be grouped together so the block's appearance can be
changed to have a dark green background and be visually different using CSS (you'll see this
later in the course).

This is a legitimate reason to use a div to group the two paragraphs together.

Here's the code:

34
INTERNET AND WEB PAGE AUTHORIZATION

<article>

<h1>Are self-driving cars worth the risk?</h1>

<div>

<p>Note: this is an editorial piece and does not reflect the official opinion of
the Sun Journal.</p>

<p>For more information about our editorial team, click <a href="#">here</a>.</p>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Id cursus metus aliquam eleifend mi in
nulla. Lorem mollis aliquam ut porttitor leo a. Nisl vel pretium lectus quam id leo in
vitae. Bibendum neque egestas congue quisque egestas diam.</p>

<p>Diam in arcu cursus euismod quis. Aliquet lectus proin nibh nisl. Blandit massa
enim nec dui nunc mattis enim ut tellus. Integer enim neque volutpat ac tincidunt vitae.
Amet porttitor eget dolor morbi non arcu risus. Orci phasellus egestas tellus rutrum
tellus pellentesque eu tincidunt tortor.</p>

</article>
Do you see where we isolated the section we wanted using a <div>?

Spans

Spans are similar to divs, except they are inline elements. You might use them to group words
together, since words appear inline and not each on their own line.

Imagine the newspaper above always prints its name in bolded light green. You need to grab
those two words — "Sun Journal" — to be able to apply CSS to them. Why not wrap them in
a <span>?

<p>Note: this is an editorial piece and does not reflect the official opinion of the
<span>Sun Journal.</span></p>

Result

35
INTERNET AND WEB PAGE AUTHORIZATION

g. Add Classes and Ids to elements


Class and id tags will revolutionize your HTML. They're absolutely necessary when your pages
start becoming more complex.

Let's say you're working on a news website, which is likely to contain paragraphs and
paragraphs of text. Some paragraphs will be within news articles, others might be disclaimer
text at the bottom of the page, others will be short article blurbs; in sum, you have no way to
tell these paragraphs apart from one another. Since they're all just <p> tags, you won't be able
to apply CSS (appearance) changes to some paragraphs but not others.

This is where classes and ids enter the scene.

Classes and ids are custom attributes you can add to your elements in order to distinguish them
from one another.

Classes apply to groups of elements, and ids apply to only one single element on an entire
page. Let's check out classes first.

These examples will include basic CSS to help you visualize how ids and classes are used, but
you're not expected to know CSS yet! Don't stress about it.

Classes

Setting a class attribute is as simple as choosing the class name and adding the attribute to your
element, like:

<h1 class="breaking-news">Your heading here</h1>

<p class="warning">Your paragraph text here</p>

<p>More paragraph text is <span class="highlight">coming your way.</span></p>


In this very generic code example,

 The heading has a class of "breaking-news".


 The paragraph has a class of "warning".
 The span has a class of "highlight".

36
INTERNET AND WEB PAGE AUTHORIZATION

Classes like this allow you to apply custom CSS to certain elements but not others. Take this
web page screenshot with filler text:

Two "warning" style paragraphs have a different background color than the others

The code behind it has 6 different paragraph tags, but 2 of them are orange to indicate a
warning, or something the reader should watch out for. The way to accomplish this is to add a
class of "warning" to the appropriate paragraphs:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur arcu massa,
placerat et laoreet et, blandit ut tellus.</p>

<p>Pellentesque ac enim vel neque volutpat luctus vitae quis lorem. Mauris sit amet mi
vehicula, pharetra odio eu, aliquet ipsum. Nullam luctus sem quis quam suscipit
condimentum. Vestibulum orci mi, tincidunt vitae eleifend in, fringilla ac tellus. Fusce
imperdiet ante erat, volutpat fringilla est commodo nec. </p>

<p class="warning">Watch out! Nunc vulputate sit amet enim ut efficitur. Sed volutpat
nunc in viverra pretium.</p>

<p>Maecenas quis nunc facilisis, cursus diam eget, bibendum lectus. Aenean iaculis nunc
in mollis vehicula. Vivamus urna turpis, fringilla eu efficitur ac, luctus sed magna.</p>

<p>Integer vel quam consequat, accumsan nisi nec, consequat dolor. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis ultrices nisi vel
elementum luctus.</p>

<p class="warning">Watch out! Mauris et quam nec felis mattis sagittis vel eget felis.
Proin tempor nibh in sollicitudin aliquam. Donec scelerisque non arcu id molestie. Nullam
luctus aliquam augue, non rhoncus dui auctor in.</p>

By adding class="warning" as an attribute to certain paragraph tags, you can grab the
relevant paragraphs and update the background color to orange for specific paragraphs!

37
INTERNET AND WEB PAGE AUTHORIZATION

ids

Ids are just like classes — they are custom attributes that can be added to elements —
except they'll only apply to one element per page.

There were multiple warning paragraphs. On the same page, let's say we want to have one
single key takeaway (added to the HTML above):

<p id="key-takeaway">Therefore, this is the one thing you should remember from the whole
page.</p>

There will only be one key takeaway per page, so we're safe to use an id on this element instead
of a class!
Now in CSS, you can adapt that one element's appearance!

h. HTML Comment Tags

You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the start tag, but not in the end tag. Comments
are not displayed by the browser, but they can help document your HTML source code. With
comments you can place notifications and reminders in your HTML code:
Example
<!-- My comment goes here-->

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

<!-- Remember to add more information here -->

QUESTIONS:
1. What are the different lists available explain briefly.
2. Explain the different tags and attributes available in table briefly.
3. What are the different tags available to create the elements of a form explain in detail.

38

Das könnte Ihnen auch gefallen