Tutorial 1 Developing a Basic Web Page
Objectives
• Learn the history of the Web and HTML • Describe HTML standards and specifications • Understand HTML elements and markup tags • Create the basic structure of an HTML file • Insert an HTML comment • Work with block-level elements • Create ordered, unordered, and definition lists
New Perspectives on HTML and XHTML, 5e
Objectives
• Work with inline elements • Understand the div and span elements • Add attributes to HTML elements • Format page content using the style attribute • Mark empty elements with one-sided tags • Add an inline image to a Web page • Work with character sets and codes
New Perspectives on HTML and XHTML, 5e
Exploring the History of the World Wide Web
• A
network
is a structure linking computers together for the purpose of sharing information and services
New Perspectives on HTML and XHTML, 5e
Exploring the History of the World Wide Web
• In its early days, the Internet was called
ARPANET
and consisted of two network nodes located at UCLA and Stanford, connected by a phone line • Early Internet tools…
New Perspectives on HTML and XHTML, 5e
Exploring the History of the World Wide Web
• Today the Internet has grown to include an uncountable number of nodes involving computers, cell phones, PDAs, MP3 players, gaming systems, and television stations
New Perspectives on HTML and XHTML, 5e
Exploring the History of the World Wide Web
• Timothy Berners-Lee and other researchers at the • CERN nuclear research facility near Geneva, Switzerland laid the foundations for the
World Wide Web
, or the
Web
, in 1989 • They developed a system of interconnected
hypertext
documents that allowed their users to easily navigate from one topic to another
Hypertext
is a method of organizing information that gives the reader control over the order in which the information is presented
New Perspectives on HTML and XHTML, 5e
Hypertext Documents
• The key to
hypertext
is the use of
links
, which are the elements in a hypertext document that allow you to jump from one topic or document to another • A
link
may point to another section of the same document, or to another document entirely • A
link
can open a document on your computer, or through the Internet, a document on a computer anywhere in the world
New Perspectives on HTML and XHTML, 5e
Web Pages and Web Servers
student.cofc.edu web server A user in Sydney views your website
New Perspectives on HTML and XHTML, 5e
Growth of Internet
• Reasons: Release com’l ban -HTTP • -1 st graphical browser • 300K 1991; 109M 2001 http://www.actewagl.com.au/Education/communications/Internet/historyOfTheInternet/InternetOnItsInfancy.aspx
New Perspectives on HTML and XHTML, 5e
Introducing HTML
• A Web page is a text file written in a language • called
Hypertext Markup Language
• A
markup language
is a language that describes a document’s content and structure • HTML is not a programming language, and it is not a formatting language
Styles
are format descriptions written in a separate language from HTML that tell browsers how to render each element for particular devices
New Perspectives on HTML and XHTML, 5e
The History of HTML
Browser Wars
• In the early years of HTML, Web developers were free to define and modify HTML in whatever ways they thought best • Competing browsers introduced some differences in the language The changes were called
extensions New Perspectives on HTML and XHTML, 5e
The History of HTML
• A group of Web developers, programmers, and authors called the
World Wide Web Consortium
, or the
W3C
, created a set of standards or specifications that all browser manufacturers were to follow • The
W3C
has no enforcement power • The recommendations of the
W3C
are usually followed since a uniform approach to Web page creation is beneficial to everyone
New Perspectives on HTML and XHTML, 5e
History of HTML and XHTML
Notice
New Perspectives on HTML and XHTML, 5e
The History of HTML
• Older features of HTML are often
deprecated
, or phased out, by the W3C. That does not mean you can’t continue to use them, but… •
XML (Extensible Markup Language)
o o o XML is a markup language much like HTML XML focuses on
extensibility
and
portability
XML was designed to transport and store data, with focus on what data is o HTML was designed to display data, with focus on how data looks
New Perspectives on HTML and XHTML, 5e
The History of HTML
•
XHTML :
is a stricter version of HTML and is designed to confront some of the problems associated with the different and competing versions of HTML
New Perspectives on HTML and XHTML, 5e
The History of HTML
•
HTML 5.0
o HTML5 is an advanced version of HTML (with more incredible features to enhance website performance) o It is not heavily used yet • There are new tags that make it much easier to embed applications and handle interactive elements. • Offline data storage. Ability for visitors to edit sections of web pages. • New HTML elements that better describe content. • Improved web form handling and validation.
New Perspectives on HTML and XHTML, 5e
HTML Facts
• HTML files consist of plain text and codes that determine how it will be formatted. • HTML files must end with the extension .htm or .html.
• The codes in HTML files are not case sensitive. The code
means the same as <title> • Do not put a spaces in file names. • HTML file names are case sensitive when they are uploaded to the server. However, while working on your PC or Mac, it doesn’t matter. • Hard returns, extra spaces, and tabs are ignored by browsers. • Tags can be classified as either container tags or empty tags: Container: <b> Welcome </b> Empty: <br /> </p>
<p><b>New Perspectives on HTML and XHTML, 5e</b></p>
<a id="p19"></a>
<h3>Using Other Block-Level Elements</h3>
<p><b>New Perspectives on HTML and XHTML, 5e</b></p>
<a id="p20"></a>
<h3>Working with Inline Elements</h3>
<p><b>New Perspectives on HTML and XHTML, 5e</b></p>
<a id="p21"></a>
<h3>Working with Character Sets and Special Characters</h3>
<p><b>New Perspectives on HTML and XHTML, 5e</b></p>
<a id="p22"></a>
<p>ELEMENTS basic tags headings p img b,i, and other formatting comments hr list div blockquote style attribute special characters MISCELLANY o o o o o o o Notepad ++ Two-sided vs empty elements Logical vs physical Attributes elements Nesting Block vs inline</p>
</div>
</section>
</div>
</div>
</div>
</main>
<footer>
<div class="container mt-3">
<div class="row justify-content-between">
<div class="col">
<a href="/">
<img src="/theme/studyslide/static/logo-slideum.png" />
</a>
</div>
</div>
<div class="row mt-3">
<ul class="col-sm-6 list-unstyled">
<li>
<h6 class="mb-3">Company</h6>
<li>
<i class="fa fa-location-arrow"></i>
Nicosia Constantinou Palaiologou 16, Palouriotissa, 1040
<li>
<i class="fa fa-phone"></i>
+357 64-733-402
<li>
<i class="fa fa-envelope"></i>
info@slideum.com </ul>
<ul class="col-6 col-sm-3 list-unstyled">
<li>
<h6 class="mb-3">Links</h6>
<li>
<a href="/about">About</a>
<li>
<a href="/contacts">Contact</a>
<li>
<a href="/faq">Help / FAQ</a>
</ul>
<ul class="col-6 col-sm-3 list-unstyled">
<li>
<h6 class="mb-3">Legal</h6>
<li>
<a href="/terms">Terms of Service</a>
<li>
<a href="/privacy">Privacy policy</a>
<li>
<a href="/page.html?code=public.usefull.cookie">Cookie policy</a>
<li>
<a href="/page.html?code=public.usefull.disclaimer">Disclaimer</a>
</ul>
</div>
<hr>
<p>slideum.com ©
2024, Inc. All rights reserved.</p>
</div>
</footer>
<div class="modal directory" id="directory-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Directory</h5>
<button class="close" type="button" data-dismiss="modal">×</button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
<script src="/theme/common/static/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="/theme/common/static/jquery_extra/dist/jquery-extra.js"></script>
<script src="/theme/common/static/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="/theme/common/static/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<script>
var __path_directory = [ ]
!function __draw_directory(data, root, uuid)
{
var ul = $('<ul>', uuid &&
{
id: 'category' + uuid,
class: !__path_directory.includes(uuid) ? 'collapse' : null
});
for (var item in data)
{
var li = $('<li>').appendTo(ul);
if (item = data[item], item.children)
{
li.append('<a href=#category' + item.id + ' data-toggle=collapse>')
__draw_directory(item.children, li, item.id);
}
else
{
li.append('<a href=' + item.url + '>');
}
var a = $('> a', li).addClass('item').text(item.name)
.append($('<a class="link fa fa-external-link" href=' + item.url + '>'));
if (item.id === +__path_directory.slice(-1))
{
a.addClass('active');
}
/*
if (item.id !== __path_directory[0])
{
a.addClass('collapsed');
}
*/
}
root.append(ul);
}
([{"id":1,"name":"Food and cooking","url":"/catalog/Food+and+cooking","children":null},{"id":2,"name":"Education","url":"/catalog/Education","children":null},{"id":3,"name":"Healthcare","url":"/catalog/Healthcare","children":null},{"id":4,"name":"Real estate","url":"/catalog/Real+estate","children":null},{"id":5,"name":"Religion ","url":"/catalog/Religion+","children":null},{"id":6,"name":"Science and nature","url":"/catalog/Science+and+nature","children":null},{"id":7,"name":"Internet","url":"/catalog/Internet","children":null},{"id":8,"name":"Sport","url":"/catalog/Sport","children":null},{"id":9,"name":"Technical documentation","url":"/catalog/Technical+documentation","children":null},{"id":10,"name":"Travel","url":"/catalog/Travel","children":null},{"id":11,"name":"Art and Design","url":"/catalog/Art+and+Design","children":null},{"id":12,"name":"Automotive","url":"/catalog/Automotive","children":null},{"id":13,"name":"Business","url":"/catalog/Business","children":null},{"id":14,"name":"Government","url":"/catalog/Government","children":null}], $('#directory-aside'));
var __root_directory = $('#directory-aside > ul');
$('#directory-aside')
.on('show.bs.collapse', function()
{
//console.log('show.collapse')
})
.on('hide.bs.collapse', function()
{
//console.log('hide.collapse')
});
$('#directory-modal')
.on('show.bs.modal', function()
{
$('[class$="body"]', this).prepend(__root_directory);
})
.on('hide.bs.modal', function()
{
$('#directory-aside').prepend(__root_directory);
});
$('.directory-mobile').on('click', function(e)
{
e.preventDefault();
});
$('.directory .link').on('click', function(e)
{
e.stopPropagation();
});
</script>
<script>
function scrollToViewport()
{
$('html, body').stop().animate(
{
scrollTop: $('.navbar').outerHeight()
},
1000);
}
setTimeout(scrollToViewport, 1000);
$(window).on('orientationchange', scrollToViewport);
$('[data-toggle="tooltip"]').tooltip();
</script>
<script async src="//s7.addthis.com/js/300/addthis_widget.js#pubid=#sp('addthis_pub_id')"></script>
<!-- Yandex.Metrika counter -->
<script type="text/javascript">
(function (d, w, c) {
(w[c] = w[c] || []).push(function() {
try {
w.yaCounter28397281 = new Ya.Metrika({
id:28397281
});
} catch(e) { }
});
var n = d.getElementsByTagName("script")[0],
s = d.createElement("script"),
f = function () { n.parentNode.insertBefore(s, n); };
s.type = "text/javascript";
s.async = true;
s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js";
if (w.opera == "[object Opera]") {
d.addEventListener("DOMContentLoaded", f, false);
} else { f(); }
})(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="//mc.yandex.ru/watch/28397281" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<style>
@media screen and (max-width: 768px)
{
.cc-revoke
{
display: none;
}}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function() {
window.cookieconsent.initialise(
{
content:
{
href: "https://slideum.com/dmca"
},
location: true,
palette:
{
button:
{
background: "#fff",
text: "#237afc"
},
popup:
{
background: "#007bff"
},
},
position: "bottom-right",
revokable: true,
theme: "classic",
type: "opt-in"
})});
</script>
</body>
</html>