7742 .html Basics
Introduction to HTML
HTML (HyperText Markup Language) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables.
This is a link to an online HTML reference guide.
HTML code uses tags <> that tell a web browser how to format that data they are to display.
Here is a link to a list of html tags.
HTML tags are like keywords which define how a web browser will format and display content. With the help of tags, a web browser can distinguish HTML content.
HTML tags contain three main parts: opening tag, content and closing tag.
But some HTML tags are un-closed tags, for example, the <img> tag for displaying images.
When a web browser reads an HTML document, the browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties.
Each HTML tag has unique properties.
An HTML file must have a few essential tags so that web browser can differentiate between a simple text and HTML text.
You can use as many tags you want as per your code requirement.
All HTML documents should start with a <!DOCTYPE> declaration.
<!DOCTYPE html>
Comments (not displayed on the web page):
<!--This is a comment. Comments are not displayed in the browser-->
<html></html> begins and ends an HTML document
The <head> </head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
<title></title> the title at the top of your page
<body> </body> body what’s on the html page
<h1> H1 is a Heading</h1> a heading text
example:
<h1 style="font-family:arial;color:navy;font-size:20px;">My First Heading</h1>
Hyperlinks (linking to another web page) using the ‘a’ tag.
The <a> tag defines a hyperlink, which is used to link from one page to another.
example:
<a href="page2.html">link to another page in this directory</a>
Images, what is the source of the image, use src=“your link”:
example
<img src=“path to your image”><img>
Line feed:
<br>
Space:
The <p> tag defines a paragraph.
<div> The <div> tag defines logical divisions within a web page</div>
Here is example code for our first html page, 'hello world.html"
<!DOCTYPE html>
<html>
<body>
hello world
</body>
</html>
CSS
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External style sheets are stored in CSS files
Use of the <style> element to apply a simple style sheet to an HTML document:
put this in your document’s <head> section
This example will change the <h1> heading color and the color of text in a <p> paragraph
<style>
h1 {color:red;}
p {color:blue;}
</style>
Example:
add this for different <a> hyperlink attributes
<style>
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
//CENTER AN IMAGE WITH CSS
example of centering text and images in a paragraph <p> tag
p {
text-align: center;
text-align:center;
font-family:arial;
color:navy;font-size:20px;
}
Add audio to your web page, note auto play doesn't work on all browsers, make sure to test, or add a button! add an 'audio' folder to your main directory.
<!-- auto play audio when page loads-->
<audio id="player" autoplay loop>
<source src="audio/myAudio.mp3" type="audio/mp3">
</audio>
Note: Autoplay on Firefox:
https://support.mozilla.org/en-US/kb/block-autoplay
Running these pages from a web server!
Using our laptops is a great way to test your website projects on your computer as well as other computers on your local network.
Once running our sites on our local web servers, open your Web browser and go to:
Windows 10 comes with a free web server, Internet Information Services (IIS).
You need to follow a few steps to install and set it up. Once finished it will work great to work on your websites.
Here is a great online 'how-to' guide.
OSX also arrives with a web server installed, Apache2, you need to start it!
Files are located in your: /Library/WebServer/Documents folder.
You may change the "index.html" file to your choosing!
Using your Terminal application found in Applications>Utilities
To start Apache web server, enter:
sudo apachectl start
To stop Apache web server, enter:
sudo apachectl stop
To restart apache web server, enter:
sudo apachectl restart
