Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
16 views

Module3 HTML Source Coding 1

The document discusses various HTML elements and how to code them. It provides examples of HTML elements like headings, paragraphs, line breaks, preformatted text, and text formatting elements. It also discusses HTML links and their syntax.

Uploaded by

agnesuenera
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
16 views

Module3 HTML Source Coding 1

The document discusses various HTML elements and how to code them. It provides examples of HTML elements like headings, paragraphs, line breaks, preformatted text, and text formatting elements. It also discusses HTML links and their syntax.

Uploaded by

agnesuenera
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 39

Web Technologies in

Libraries & Information


Center
HTML Source Coding

APRIL JOY A. PALMARES, MIT


MOTIVATION

“Your website is the center of your digital eco-


system, like a brick and mortar location, the
experience matters once a customer enters, just as
much as the perception they have of you before they PRESENTATION
walk through the door.” Reading this module will not guarantee you to become a
– Leland Dieno computer programmer. You won’t learn programming, if you
don’t apply the theories presented in our lecture materials.

Theory is better but application of the theories is much,


much better. You can’t swim by just reading a book, you
can’t learn how to drive by just reading a manual, learn to
program is a traditional way, I suggest you start to program
in order to learn.

In theory, everything seems easy, but programming means


practice.

2
Example Source code #1 (save it as htmlexample1.html)

Explanation:
• The DOCTYPE declaration defines the document and HTML
version.
• The text between <html> and </html> describes an HTML
document
• This <head></head> tag represents the document's header
which can keep other HTML tags like <title>, <link> etc.
• The text between <title> and </title> provides a title for the
document
• The text between <body> and </body> describes the visible
page content
• The text between <h1> and </h1> describes a heading
• The text between <p> and </p> describes a paragraph
3
What is HTML Element

What is an HTML Element?


An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>

Note: Some HTML elements have no content (like the <br> element). These elements are called
empty elements. Empty elements do not have an end tag!

4
Web Browsers
Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document

5
6
NOTE: Never Skip the End Tag
Some HTML elements will display correctly, even if you
forget the end tag:

Example:

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

7
However, never rely on this! Unexpected results and errors may occur if you
forget the end tag!
NOTE: HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML standard does not require lowercase tags, but
W3C recommends lowercase in HTML, and demands lowercase for stricter
document types like XHTML.
HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage.
•Heading 1
•Heading 2
•Heading 3
•Heading 4
•Heading 5
•Heading 6

8
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

9
Example Source code #2 (save it as htmlexample2.html)
(complete the code by providing h4 to h6)

Note: Browsers automatically add some white space


(a margin) before and after a heading.
10
Headings Are Important
 Search engines use the headings to index the structure and content of your
web pages.
 Users often skim a page by its headings. It is important to use headings to
show the document structure.
 <h1> headings should be used for main headings, followed by <h2>
headings, then the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make
text BIG or bold.

11
HTML Paragraphs
Paragraphs allow you to add text to a document in such a way that it will automatically adjust the
end of line to suite the window size of the browser in which it is being displayed. Each line of text will
stretch the entire length of the window.

The HTML <p> </p> element defines a paragraph.


A paragraph always starts on a new line, and browsers automatically add some white space (a
margin) before and after a paragraph.
HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML
code.
The browser will automatically remove any extra spaces and lines when the page is displayed:

12
Example Source code #3 (save it as htmlexample3.html)

13
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 Source code #4 (save it as htmlexample4.html)

14
The <br> tag is an empty tag, which means that it has no end tag.
HTML <pre> Element
• The HTML <pre> element defines preformatted text.
• The text inside a <pre> element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line breaks:
Example Source code #5 (save it as htmlexample5.html)

HTML Text Formatting Elements


<p><b>This text is bold</b>.</p>

<p><em>This text is emphasized</em>.</p>

<p><i>This text is italic</i>.</p>

<h2>HTML <small>Small</small>Formatting</h2>

<p><strong>This text is strong</strong>.</p>

<p>This is <sub>subscripted</sub> text.</p>

<p>This is <sup>superscripted</sup> text.</p>

<p>My favorite color is <ins>red</ins>!</p>

<p>My favorite color is <del>blue</del> <p>


15
<p>Rolan <mark>cute</mark> today.</p>
Example Source code #6 (save it as htmlexample6.html)

Browsers display <strong> as <b>, and


<em> as <i>.

However, there is a difference in the meaning


of these tags: <b> and <i> defines bold and
italic text,
but <strong> and <em> means that the text
is "important".

Fun fact: old browsers don't


know <strong> and <em> they simply ignore
it. But <b> and <i> works even in Mosaic beta
versions (0.61).

Note: use <strong> and <em> 16


Html links
 Links are found in nearly all web pages. Links allow users to click their way from page to page.
 HTML links are hyperlinks.
 A hyperlink is a text or an image you can click on, and jump to another document.
Note: A link does not have to be text. A link can be an image or any other HTML element!
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:

Example Source code #7 (save it as htmlexample7.html)


<a href="url">link text</a>

The most important attribute of


the <a> element is the href attribute,
which indicates the link's destination.
The link text is the part that will be visible
to the reader.
Clicking on the link text, will send the
17
reader to the specified URL address.
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

HTML Links - The target Attribute


By default, the linked page will be displayed in the current browser window. To change this, you
must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
 _self - Default. Opens the document in the same window/tab as it was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window
18
Example Source code #8 (save it as htmlexample8.html)

Absolute URLs vs. Relative URLs


 Both examples above are using an absolute URL (a full
web address) in the href attribute.
 A local link (a link to a page within the same website) is 19
specified with a relative URL (without the "https://www"
part):
Example Source code #9 (save it as htmlexample9.html)

20
HTML Images
Images are very important to beautify as well as to illustrate many complex concepts
in simple way on your web page.
Insert Image
 You can insert any image in your web page by using <img> tag.
 The <img> tag is an empty tag, which means that it can contain only list of
attributes and it has no closing tag.
 The src attribute specifies the folder location or web address of the image:

Example Source code #10 (save it as htmlexample10.html)

21
You can set image width and height based on your requirement using width and height attributes.
You can specify width and height of the image in terms of either pixels or percentage of its actual
size.

The alt Attribute


 The required 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 the user uses a
screen reader).
 The value of the alt attribute should describe the image

HTML Tables
 The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into
rows and columns of cells.
 The HTML tables are created using the <table> tag in which the <tr> tag is used to create table
rows and <td> tag is used to create data cells.
 Table Heading
 Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is
used to represent actual data cell. Normally you will put your top row as table heading.

22
Example Source code #10e (save it as htmlexample10e.html)

23
HTML Lists
HTML offers web authors two ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain:

<ul> - An unordered list. This will list items using plain bullets.
<ol> - An ordered list. This will use different schemes of numbers to list your items.

Unordered HTML List


An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in
the list is marked with a bullet.

Example Source code #11 (save it as htmlexample11.html)

24
Example Source code #12 (save it as htmlexample12.html)

Unordered HTML List - Choose List


Item Marker
The CSS list-style-type property is
used to define the style of the list item
marker. It can have one of the
following values:
Value Description
disc Sets the list item marker to a
bullet (default)
circle Sets the list item marker to a
circle
square Sets the list item marker to a
square
none The list items will not be
25
marked
HTML Ordered Lists
Example Source code #13 (save it as
htmlexample13.html)

If you are required to put your items in a numbered list


instead of bulleted then HTML ordered list will be used.

This list is created by using <ol> tag.

The numbering starts at one and is incremented by one


for each successive ordered list element tagged with <li>.

Each list item starts with the <li> tag.

26
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines
the type of the list item marker:
Example Source code #14 (save it as htmlexample14.html)
Type Description
type="1" The list items will be
numbered with numbers
(default)
type="A" The list items will be
numbered with
uppercase letters
type="a" The list items will be
numbered with lowercase
letters
type="I" The list items will be
numbered with
uppercase roman
numbers
type="i" The list items will be
numbered with lowercase
roman numbers 27
HTML 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 ASP Script or PHP script etc.
 There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

HTML Form Controls


There are different types of form controls that you can use to collect data using HTML form:
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and Reset Button

Text Input Controls


There are three types of text input used on forms:
 Single-line text input controls - This control is used for items that require only one line of user input, such as search boxes or
names. They are created using HTML <input> tag.
 Password input controls - This is also a single-line text input but it masks the character as soon as a user enters it. They are
also created using HTML <input> tag. 28
 Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence.
Multi-line input controls are created using HTML <textarea> tag.
Single-line text input controls
Example Source code #15 (save it as htmlexample15.html)

Attributes
Following is the list of attributes for
<input> tag for creating text field.
Attribute Description
type Indicates the type of input control and for
text input control it will be set to text.
name Used to give a name to the control which
is sent to the server to be recognized and
get the value.
value This can be used to provide an initial
value inside the control.
size Allows to specify the width of the text-
input control in terms of characters.
maxlength Allows to specify the maximum number of
characters a user can enter into the text
box.

29
Password input controls
Example Source code #16 (save it as htmlexample16.html)
Attributes
Following is the list of attributes for
<input> tag for creating password
field.

Attribute Description
type Indicates the type of input control and for password
input control it will be set to password.
name Used to give a name to the control which is sent to the
server to be recognized and get the value.
value This can be used to provide an initial value inside the
control.
size Allows to specify the width of the text-input control in
terms of characters.
maxlength Allows to specify the maximum number of characters
a user can enter into the text box.

30
Multiple-Line Text Input Controls
Example Source code #17 (save it as htmlexample17.html)

31
Attributes
Following is the list of attributes for <textarea> tag.
Attribute Description
name Used to give a name to the control which is sent to the server to be recognized and get the value.
rows Indicates the number of rows of text area box.
cols Indicates the number of columns of text area box

Checkbox Control
Example Source code #18 (save it as
htmlexample18.html)

32
Attributes
Following is the list of attributes for <checkbox> tag.
Attribute Description
type Indicates the type of input control and for checkbox input control it will be set to checkbox.
name Used to give a name to the control which is sent to the server to be recognized and get the value.
value The value that will be used if the checkbox is selected.
checked Set to checked if you want to select it by default.

Radio Button Control


Example Source code #19
(save it as
htmlexample19.html)

33
Attributes
Following is the list of attributes for radio button.

Attribute Description
type Indicates the type of input control and for checkbox input control it will be set to radio.
name Used to give a name to the control which is sent to the server to be recognized and get the value.
value The value that will be used if the radio box is selected.
checked Set to checked if you want to select it by default.

Select Box Control


Example Source code
#20 (save it as
htmlexample20.html)

34
Attributes
Following is the list of important attributes of <select> tag:
Attribute Description
name Used to give a name to the control which is sent to the server to be recognized and get the value.
size This can be used to present a scrolling list box.
multiple If set to "multiple" then allows a user to select multiple items from the menu.

Following is the list of important attributes of <option> tag:


Attribute Description
value The value that will be used if an option in the select box box is selected.
selected Specifies that this option should be the initially selected value when the page
loads.
label An alternative way of labeling options

35
File Upload Box
Example Source code #21 (save it as htmlexample21.html)

Attributes
Following is the list of important attributes of file upload box:
Attribute Description
36
name Used to give a name to the control which is sent to the server to be recognized and get the value.
accept Specifies the types of files that the server accepts.
Button Controls
There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input> tag by setting its type
attribute to button. The type attribute can take the following values:

Type Description
submit This creates a button that automatically submits a form.
reset This creates a button that automatically resets form controls to their initial values.
button This creates a button that is used to trigger a client-side script when the user clicks that button.
image This creates a clickable button but we can use an image as background of the button.

Example Source code #22


(save it as
htmlexample22.html)

37
Hidden Form Controls
Example Source code #23 (save it as
htmlexample23.html)

38
QUESTIONS??

39

You might also like