Scribd
Upload
78 views52 pages

The Internet and World Wide Web - Part2

This document describes key aspects of HTML and web development. It defines HTML as the standard markup language used to describe the structure of web pages. It outlines the basic steps of web publishing, including planning, designing, creating, and maintaining a website. Common HTML tags like headings, paragraphs, lists, and links are also explained. The document concludes by introducing Web 2.0 and some online tools that can be used for learning and everyday tasks, such as Twitter, Prezi, and Google Hangouts.

Uploaded by

emdh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
78 views52 pages

The Internet and World Wide Web - Part2

This document describes key aspects of HTML and web development. It defines HTML as the standard markup language used to describe the structure of web pages. It outlines the basic steps of web publishing, including planning, designing, creating, and maintaining a website. Common HTML tags like headings, paragraphs, lists, and links are also explained. The document concludes by introducing Web 2.0 and some online tools that can be used for learning and everyday tasks, such as Twitter, Prezi, and Google Hangouts.

Uploaded by

emdh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 52

MPU3412 / TMX1022

ICT COMPETENCY
Unit 4: The Internet and World Wide Web (Part II)
Unit Learning Outcomes
• By the end of this unit, students will be able to:
• Describe Web development basic steps

• Identify Web 2.0 and online tools and resources relevant to their learning and
everyday use

Image source: Google Image


WEB DEVELOPMENT
Web Publishing
• Web publishing is the creation and maintenance of
websites

Design Create Maintain


Plan the Host the
the the the
website website
website website website

Image source: Discovering Computers 2016


Markup Language
• A markup language is a set of instructions used for
creating annotations that are used for formatting
documents for display or printing

• Examples of markup languages:

Hypertext Markup Language eXtensible Hypertext Markup


(HTML) Language (XHTML)

Standard Generalized Markup


eXtensible Language (XML)
Language (SGML)
HTML
• HTML is short for Hypertext Markup Language

• HTML is used to describe the content and structure of data and


information in a document, for Web browsers to display

• HTML tags are instructions that specify how the document


should appear when displayed by the Web browser

• HTML documents can be created using a text editor

• It is the most widely known and used markup language

Image source: Google Image


HTML
• HTML source and display on a web browser

Image source: Google Image


HTML
• Example of a webpage and its corresponding HTML

Image source: Discovering Computers 2016


HTML
• HTML5 is the latest HTML standard, that replaces HTML4 and
XHTML
• HTML5 is designed to deliver rich contents without requiring the user
to install additional plugins
• A plugin is a program that extends the capability of a Web browser
• HTML5 is capable of working on other platforms such as tablets,
smartphones and smart TVs, other than the conventional web
browsers
• New features of HTML5 include:

Local SQL New elements


Video & audio
database and attributes

Web Full CSS3


applications support
HTML
• HTML tags are enclosed in angle brackets: <html>
• Each tag’s name is called an element
• Syntax: <element> content </element>
• E.g.: <p> This is a paragraph </p>
• HTML tags usually come in pairs: <p> and </p>
• The first tag is called the start tag or opening tag
• The second tag is called the end tag or closing tag
• Some tags contain additional information, called attributes
• Syntax: <element attribute=“value”> content </element>
• E.g.: <a href=“page10.html”> Page 10 </a>
HTML
• Some tags do not have contents, so it can be opened and closed in
one tag instead of in pairs
• Syntax: <element attribute=“value” attribute=“value2” />
• E.g.: <img src=“cat.jpg” /> or <hr />
• HTML can be written using text editors (e.g. Notepad)
• HTML documents must have either .html or .htm extension
• Most whitespace is insignificant and ignored in HTML
HTML
• The structure of a HTML document contains a head section and a
body section
• Head section contains information that describes the webpage document
• Body section contains text and elements that are to be displayed on the
browser

Image: Stepp & Miller, 2009


HTML
HTML
• Document Type Definition (DTD) identifies the version of
HTML used in the webpage document
• It is placed at the top most of the document

Image: Stepp & Miller, 2009


HTML
• The <title> tag describes the title of the webpage
• The tag is placed within the head section
• The title is displayed in the browser’s title bar and when
bookmarking the page
• Syntax example: <title> My First Webpage
</title>
HTML
• The <p> tag groups sentences and sections of text
together into a paragraph
• This tag is placed within the body section
• It configures a blank line above and below the paragraph
• Example:

Image: Stepp & Miller, 2009


HTML
• The headings tags <h1>, <h2>, …, <h6> are used to
create heading to separate sections in the webpage
based on importance
• <h1> denotes the most important heading, while <h6>
denotes the least important heading
• Example:
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
HTML
• The <br> tag forces a line break in the middle of a block
of text or elements and causes the next text/element to
display on a new line
• This tag is placed within the body section
• It should immediately be closed with a back slash /
• Example:

Image: Stepp & Miller, 2009


HTML
• The <hr> tag is used to create a horizontal line to
separate sections in the webpage
• This tag is placed within the body section
• It should immediately be closed with a back slash /
• Example:

Image: Stepp & Miller, 2009


HTML
• The <img> tag is for inserting graphics or images into the page
• The src attribute specifies where the graphics or image is located (its
URL)
• The tag is placed within the body section
• Example:

Image: Stepp & Miller, 2009


HTML
• The <ol> tag creates a numbered/lettered list of items
• The default is numerals
• To contain items in the list, the <li> tag is used
• The tag is specified within the body section
• Example:

<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
HTML
• The <ul> creates a bulleted list of items
• The default type is disc
• To contain items in the list, the <li> tag is used
• The tag is specified within the body section
• Example:

<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>
HTML
• The <dl> tag is used to create a description list (formerly known as
definition list)
• The <dt> tag is used to contain a term/phrase/sentence
• The <dd> tag contains a description of the term/phrase/sentence and
indents the text
• The tag is specified within the body section
• Example:
<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>
HTML
• The <a> tag is used to specify a link or anchor reference to a file or
page
• The <href> attribute is used to specify the destination of the file or page
• It can be either absolute (to another website) or relative (to another page
on the same site)
• The tag is specified within the body section
• Example:

Image: Stepp & Miller, 2009


HTML
• HTML tags that can be used to format text:

Image: Stepp & Miller, 2009


HTML
• It is important to write valid HTML or XHTML, in order for
more consistent browser display
• The World Wide Web Consortium (W3C)provides a free
markup validation service that can be accessed at
http://validator.w3.org/
• The validator checks markup validity of Web documents
written in HTML, XHTML, and other markup languages
• Users can validate their Web documents by three ways:
by URI, by file upload, or by direct input
• Other validators that are available: Unicorn, Markup
Validator, Line Checker, CSS Validator, XML Schema
Validator, etc.
HTML
WEB 2.0
Web 2.0
• Web 2.0 refers to websites that provide a means for users
to share personal information, allow users to modify
website content, and provide applications through a
browser
• E.g. online social networking sites

Image: Vermaat, Sebok & Freund (2014)


TOOLS RELEVANT TO
LEARNING AND EVERYDAY USE
Tools relevant to learning & everyday use
• There are many Web 2.0 and social media tools available
for students to use in their learning and everyday tasks.
• Some suggested tools are:
• Twitter
• This microblogging site allows users to post 140-character text
messages called “tweets”.
• Students and educators can post short, “bite-size” chunks of information
related to their academic works.
• Hashtags (keywords preceded with the hash ‘#’ sign) can be used to
group/track the related tweets.
Tools relevant to learning & everyday use
• Prezi
• Prezi is a free online tool that lets users create, collaborate, present and
share interactive presentations with each other.
• Students can have the latest versions of their presentations with them
anytime, as long as they have Internet connection, as Prezi is a cloud-
based application and allows students to present directly from their
computing devices.
• Prezi has a feature called Prezi Showcase that allows users to share
their presentations with the public, or with people in their social
networks such as Facebook or Twitter.
Tools relevant to learning & everyday use
• Google Hangout
• Google Hangout allows users to voice or video chat, instant message
and share photos with each other.
• Students and educators can use Google Hangout to have real-time
virtual hangouts together (group video chats) to discuss on academic
works, or have study groups.
Tools relevant to learning & everyday use
• Wikia
• Wikia is a free wiki website that users can use to create, modify and
share contents on specific subjects or topics.
• Students and educators can use Wikia to post content and information
on their courses or academic works.
• Contents and information on wikis are usually in text, but can include
other multimedia elements such as audio, image and video.
Tools relevant to learning & everyday use
• SoundCloud
• SoundCloud is an online tool that allows for recording of podcasts –
digital audio files – that can be listened to and shared over the Internet.
• Students can use SoundCloud to record their discussions, opinions, or
questions then share it online with their friends and/or educators.
• Educators can record their lectures, or materials on SoundCloud, and
students can then listen to the podcasts on their mobile devices, while
on the move e.g. on the bus/train, while exercising, etc., or when they
are out of the classroom.
Tools relevant to learning & everyday use
• YouTube
• YouTube is a video hosting and sharing site, and it allows users to
upload their own videos to share with others.
• Similar to podcasts, students can record their academic works,
assignments, projects, etc. and share it online with their friends and/or
educators.
• Educators can record their lectures, or other academic materials (e.g.
answers to students’ questions), coupled with graphical illustrations, and
upload the materials to YouTube for students to watch when they are
not in the classroom, or on the move.
Tools relevant to learning & everyday use
• As this tools are cloud-based services, users do not have
to worry about having to install special software on their
computing devices just to use the tools.
• Users only need to create an account, and have an active Internet
connection on their devices, and they can use these tools
anywhere, anytime on their devices (desktops, laptops, tablets,
smartphones etc.).
ONLINE RESOURCES
Types of online resources
• The Web is a treasure chest of information and resources
(there are billions of Web pages), and this can lead to
sense of being overwhelmed if one does not know how or
where to look for what they want or need.
• There are many types of resources available on the Web,
namely text, images, pictures, audio/podcasts, video,
articles, journals, documents, maps, blogs, contact
details, software, apps, e-Books, other publication types,
etc.
Types of online resources
• As the Web contains a huge amount of information and
resources, it is important for the searcher to clearly know
what he/she is searching for – the main idea or concept –
and from there, work to identify related terms to that main
idea or concept.
• Related terms can be synonyms or variant words, or alternate
spellings.
Types of online resources
• Once the searcher knows what he/she wants to search
for, he/she can use either one of these tools to locate the
information or resources needed:
• Search engines
• Google
• Bing
• Web directories
• The Open Directory Project (http://www.dmoz.org/)
• Yahoo! Directory (http://dir.yahoo.com/)
How to search for online resources
• Basic search:
• Select a search engine (there are many to choose from e.g.
Google, Yahoo!, Bing, etc.).
• Type in the search text – the word/group of words (phrase) of what
you want to find.
• You can search for these items: publications (articles, journals, news,
papers, etc.), people/businesses (names, phone numbers, addresses,
CVs, etc.), images, videos, audio, maps, blogs
• Your search text can be either broad, or specific e.g. “place to eat in
Kota Samarahan” (broad) and “seafood restaurant in Kota Samarahan”
(specific)
• Another example: “programming languages” (broad), “Java” (specific)
• The search engine may provide suggestions for alternative search
text and corrected spellings
How to search for online resources
• Basic search (cont’d):
• Click/hit the ‘Search’ button, or simply press the ‘Enter’ key on your
keyboard.
• The results (responses) returned by the search engine are called
hits
• Hits can be in the form of: links to webpages and documents (.doc, .rtf,
.pdf etc.), media (images, videos, audio). Some search engines provide
snippets (short text answers of the search result). Example of how
snippets look like (highlighted by the red rectangle):
• Since there are usually many (can be thousands or even millions of
hits), you may feel like you don’t know which one to choose.
Because search engines’ results sequence are based on how close
the words in your search text to the ones in titles and/or
descriptions of the results, it is suggested that you go through the
first few results returned (they may contain information that are
more relevant to what you are looking for).
How to search for online resources
• Advanced search
• Search engines like Google and Yahoo! also provide another
feature called Advanced Search for users to refine their search
results.
• Users only need to type in the types of filter they want to use, and the
search engines will return the results based on the filters specified.
• Examples of filter include language, region, last update, site/domain, file
type, etc.
• Google’s Advanced Search is available at
http://www.google.com/advanced_search while Yahoo!’s
Advanced Search is at
http://search.yahoo.com/search/options?fr=fp-top&p=
How to search for online resources
• Other than advanced search feature, users can also use
search engine operators to search for more specific
results.
• Examples of search engine operators:
• Filetype
• Returns search results that only has the specified filetype e.g. open source filetype:pdf
will return PDF files containing the term ‘open source’
• “”
• Returns search results that only has the exact phrase e.g. “open source” will return
results that contain the exact phrase ‘open source’
How to search for online resources
• Other than advanced search feature, users can also use
search engine operators to search for more specific
results.
• Examples of search engine operators:
• OR
• Returns search results that has either word e.g. “open source OR proprietary” will
return results that contain either ‘open source’ or ‘proprietary’
• –
• Returns search results that exclude the word e.g. “open source –software” will return
results that contain the word ‘open source’ but do not include the word ‘software’
How to search for online resources
• Other than advanced search feature, users can also use
search engine operators to search for more specific
results.
• Examples of search engine operators:
• Space or +
• Returns search results that have the specific words e.g. “open + source + technology”
will return results that have all three words, in random order.
• For more operators, visit: The Google Guide Advanced Operators
Reference
http://www.googleguide.com/advanced_operators_reference.html
Credible/reliable online resources
• As the Web contains billions of pages, it is important to
ensure that the information or resources obtained are
credible and reliable to be used and presented.
• To learn more about searching for resources that are
credible and reliable, watch these videos:
• Credible Websites? by Hartness Library
(http://www.youtube.com/watch?v=AFEwwG7rq0E)
• Evaluating Sources on the World Wide Web
(http://www.youtube.com/watch?v=ELclOOxzt3U)
Credible/reliable online resources
• When using the information or resources obtained from
the Web, it is important to give credit and cite from where
those materials are from.
• It can be as simple as a single line stating “This information was
obtained from (Web site address)”, OR
• Using systematic citation styles such as APA, Harvard, MLA, etc.
Storing & managing online resources
• Pocket – allows users to save Web pages or articles into
reading lists for reading at a later time.
• https://getpocket.com/
• Evernote – allows users to take notes with image, audio
and video attachments.
• https://www.evernote.com/
• Dropbox and Google Drive – allows users to store files
and access the files from anywhere with Internet
connection, as well as share the files with their friends.
• https://www.dropbox.com/
• https://drive.google.com
Summary
Tools for
Web
Web 2.0 learning and
Development
everyday use

Online Standards and


Resources Coordination
References/Credits
• Vermaat, M.E., Sebok, S.L., Freund, S.M., Campbell, J.T.,
and Frydenberg, M. (2016). Discovering Computers 2016:
Tools, Apps, Devices, and the Impact of Technology.
Singapore: CENGAGE Learning.

You might also like