1 Intro to HTML CS 1150 Spring 2017
2 Web Servers When you ask your browser for a webpage, the request is sent over the internet to a webserver Web servers are special computers that are constantly connected to the internet They are optimized to send webpages out to people who request them
3 Websites When you are looking at a website, it is likely that your browser is receiving HTML and CSS from the webserver hosting the site Most webpages also include images, audio, video, and animations Some sites also send Javascript or Flash to the browser Larger, more complex sites may use a database to store data and programming languages such as PHP, ASP.Net, Java, or Ruby
4 HTML5 In this class, we will be learning HTML5, which is the latest version of HTML available today Most browsers support the latest version of HTML We will be learning previous versions of this language as well, since HTML5 is built on the earlier versions
5 How the Web Works When you visit a website, the web server hosting that site could be anywhere in the world In order for you to find the location of the web server, your browser will first connect to a Domain Name System (DNS) server DNS servers act like phone books; they tell your computer the IP address associated with the requested domain name Every device on the web has a unique IP address; it is like the telephone number for that computer Once the DNS server returns the IP address, the browser goes to that IP address and the webserver returns HTML and other code for the browser to display
6 Simple Web Diagram
7 Simple Web Flow Diagram
8 Detailed Web Flow Diagram
9 HTML Introduction HTML stands for Hyper Text Markup LanguageHTML describes the structure of webpages HTML elements are the building blocks of HTML pages HTML elements are represented by tags HTML tags label pieces of content such as “heading”, “paragraph”, “table” and so on
10 Structure of an HTML Webpage An Example HTML Webpage This is the Main Heading
This is a paragraph
This is a Sub-Heading
Many long articles have sub-headings.
Another Sub-Heading
Here is a paragraph below a sub-heading
Here is another paragraph below a sub-heading
Structure of an HTML Webpage
11 HTML Elements HTML code is made up of characters that live inside angled brackets - these are called HTML elements Elements are usually made up of two tags: an opening tag and a closing tag Each HTML element tells the browser something about the information that sits between its opening and closing tags
12 The elementThe element defines the whole document The opening tag indicates that anything between it and a closing tag is HTML code The closing tag indicates that it is the end of the HTML code
13 The
element
The element is a container for metadata (data about data) and is placed between the tag and the tag HTML metadata is data about the HTML document and is not displayed on the webpage Metadata defines the document title, character set, styles, and other meta information 14 The
element<span class='tr'>The <title> element defines the title of the document</span> <span class='tr'>The title appears in the browser tab</span> <span class='tr'>It provides a title for the document when the webpage is added to favorites or displayed in search engine results</span></p><p><span class="span-circle-num"> 15 </span> The <body> element<span class='tr'>The <body> element defines the document body</span> <span class='tr'>The <body> tag indicates that anything between it and the closing </body> tag should be shown inside the main browser window</span> <span class='tr'>The closing </body> tag indicates the end of what should appear in the main browser window</span></p><p><span class="span-circle-num"> 16 </span> <span>HTML Headings</span> <span class='tr'>Headings are defined with the <h1> to <h6> tags</span> <span class='tr'><h1> defines the most important heading, while <h6> defines the least important heading</span> <span class='tr'>Note: Browsers automatically add some white space (a margin) before and after a heading</span></p><p><span class="span-circle-num"> 17 </span> HTML Paragraphs The HTML <p> element defines a paragraph<span class='tr'>Note: Browsers automatically add some white space (a margin) before and after a paragraph</span></p><p><span class="span-circle-num"> 18 </span> A Closer Look at Tags Symbol Description < Left-angle bracket ><span class='tr'>Right-angle bracket</span> <span>/</span> <span class='tr'>Forward slash</span> <span class='tr'>The characters in the bracket indicate the tag’s purpose</span> <span class='tr'>The terms “tag” and “element” are often used interchangeably</span> <span class='tr'>Strictly speaking, an element comprises the opening tag and the closing tag and any content that lies between them</span></p><p><span class="span-circle-num"> 19 </span> <span>HTML Attributes</span> <span class='tr'>Attributes provide additional information about the contents of an element</span> <span class='tr'>They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign</span> <span class='tr'>Example: The value of the lang attribute is an abbreviated way of specifying which language is used inside the element that all browsers understand</span> <span class='tr'><p lang="en-us"> Paragraph in English </p></span> <span class='tr'><p lang="fr"> Paragraphe en Français </p></span></p><p><span class="span-circle-num"> 20 </span> Viewing the Source of a Webpage<span class='tr'>Open a webpage</span> <span class='tr'>Click the View menu</span> <span class='tr'>Select the option that says Source or View source (the title changes depending on what browser you are using</span> <span class='tr'>You should see a new window appear, and it will contain the source code that was used to create the webpage you opened</span> <span class='tr'>Example: source.html</span></p><p><span class="span-circle-num"> 21 </span> <span>The Komodo Editor</span> <span class='tr'>Many different text editors can be used to edit HTML and CSS code</span> <span class='tr'>In this class, we will learn to use Komodo</span></p><p><span class="span-circle-num"> 22 </span> CS Department Web Hosting<span class='tr'>cs.mtsu.edu/~crn2k</span> <span class='tr'>The public_html folder contains all website files</span> <span class='tr'>index.html is the default homepage</span></p><p><span class="span-circle-num"> 23 </span> Helpful Links www.w3schools.com/html<span></span> <span></span> <span></span> <span></span></p> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- Box Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Sign In</h3>
</div>
<div class="modal-body">
<form action="https://slidepptx.com/login" method="post">
<div class="form-group form-group-lg">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group form-group-lg">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group form-group-lg">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember Password </label>
<label class="pull-right"><a href="https://slidepptx.com/forgot">Forgot Password?</a></label>
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button>
</form>
<hr style="margin-top: 15px;" />
<a href="https://slidepptx.com/login/google" class="btn btn-lg btn-google btn-block"><i class="fa fa-google"></i> Login with Google</a>
</div>
</div>
</div>
</div>
<!-- Box Footer -->
<div class="footer-container" style="background: #fff;display: block;padding: 10px 0 20px 0;margin-top: 30px;">
<div class="footer-container-inner">
<footer id="footer" class="container">
<div class="row">
<div class="bottom-footer">
<div class="container">
Copyright © 2026 SLIDEPPTX.COM. All rights reserved.
</div>
<hr />
</div>
</div>
<div class="row">
<!-- Block footer -->
<section class="block col-md-4 col-xs-12 col-sm-3" id="block_various_links_footer">
<h4>Information</h4>
<ul class="toggle-footer" style="">
<li><a href="https://slidepptx.com/about">About Us</a></li>
<li><a href="https://slidepptx.com/privacy">Privacy Policy</a></li>
<li><a href="https://slidepptx.com/term">Terms and Conditions</a></li>
<li><a href="https://slidepptx.com/copyright">Copyright</a></li>
<li><a href="https://slidepptx.com/contact">Contact Us</a></li>
</ul>
</section>
<!-- /Block footer -->
<section id="social_block" class="col-md-4 col-xs-12 col-sm-3 block">
<h4>Follow us</h4>
<ul>
<li class="facebook">
<a target="_blank" href="" title="Facebook">
<i class="fa fa-facebook-square"></i> <span>Facebook</span>
</a>
</li>
<li class="twitter">
<a target="_blank" href="" title="Twitter">
<i class="fa fa-twitter-square"></i> <span>Twitter</span>
</a>
</li>
<li class="google-plus">
<a target="_blank" href="" title="Google Plus">
<i class="fa fa-plus-square"></i> <span>Google Plus</span>
</a>
</li>
</ul>
</section>
<!-- Block Newsletter module-->
<div id="newsletter" class="col-md-4 col-xs-12 col-sm-3 block">
<h4>Newsletter</h4>
<div class="block_content">
<form action="https://slidepptx.com/newsletter" method="post">
<div class="form-group">
<input id="newsletter-input" type="text" name="email" size="18" placeholder="Entrer Email" />
<button type="submit" name="submit_newsletter" class="btn btn-default">
<i class="fa fa-location-arrow"></i>
</button>
<input type="hidden" name="action" value="0">
</div>
</form>
</div>
</div>
<!-- /Block Newsletter module-->
</div>
</footer>
</div>
</div>
<!-- #footer -->
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://slidepptx.com/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
$(document).ready(function() {
$(".doc-share-btn").click(function() {
var urlshare = $(this).attr('data-share-url');
window.open('http://www.facebook.com/sharer.php?u=' + urlshare, '_blank');
});
});
function download_submit() {
$('#download_form').submit();
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-106734935-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
