Intro to HTML and CSS - CS Community – Computer Science

Download Report

Transcript Intro to HTML and CSS - CS Community – Computer Science 

Intro to HTML
CS 1150 Spring 2017
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
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
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
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
Simple Web
Diagram
Simple
Web Flow
Diagram
Detailed
Web Flow
Diagram
HTML Introduction
• HTML stands for Hyper Text Markup Language
• HTML 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
<!DOCTYPE html>
<html>
<head>
<title>An Example HTML Webpage</title>
</head>
<body>
<h1>This is the Main Heading</h1>
<p>This is a paragraph</p>
<h2>This is a Sub-Heading</h2>
<p>Many long articles have sub-headings.</p>
<h2>Another Sub-Heading</h2>
<p>Here is a paragraph below a sub-heading</p>
<p>Here is another paragraph below a sub-heading</p>
</body>
</html>
Structure of an HTML Webpage
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
The <html> element
• The <html> element defines the whole document
• The opening <html> tag indicates that anything between it and a closing
</html> tag is HTML code
• The closing </html> tag indicates that it is the end of the HTML code
The <head> element
• The <head> element is a container for metadata (data about data) and is
placed between the <html> tag and the <body> 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
The <title> element
• The <title> element defines the title of the document
• The title appears in the browser tab
• It provides a title for the document when the webpage is added to favorites
or displayed in search engine results
The <body> element
• The <body> element defines the document body
• The <body> tag indicates that anything between it and the closing </body>
tag should be shown inside the main browser window
• The closing </body> tag indicates the end of what should appear in the main
browser window
HTML Headings
• Headings are defined with the <h1> to <h6> tags
• <h1> defines the most important heading, while <h6> defines the least
important heading
• Note: Browsers automatically add some white space (a margin) before and
after a heading
HTML Paragraphs
• The HTML <p> element defines a paragraph
• Note: Browsers automatically add some white space (a margin) before and
after a paragraph
A Closer Look at Tags
Symbol
Description
<
Left-angle bracket
>
Right-angle bracket
/
Forward slash
•
•
The characters in the bracket indicate the tag’s purpose
The terms “tag” and “element” are often used interchangeably
• Strictly speaking, an element comprises the opening tag and the closing tag and any content
that lies between them
HTML Attributes
• Attributes provide additional information about the contents of an element
• 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
• Example: The value of the lang attribute is an abbreviated way of specifying
which language is used inside the element that all browsers understand
<p lang="en-us"> Paragraph in English </p>
<p lang="fr"> Paragraphe en Français </p>
Viewing the Source of a Webpage
•
•
•
•
•
Open a webpage
Click the View menu
Select the option that says Source or View source (the title changes depending on
what browser you are using
You should see a new window appear, and it will contain the source code that was
used to create the webpage you opened
Example: http://www.htmlandcssbook.com/code-samples/chapter-01/viewsource.html
The Komodo Editor
• Many different text editors can be used to edit HTML and CSS code
• In this class, we will learn to use Komodo
CS Department Web Hosting
• cs.mtsu.edu/~crn2k
• The public_html folder contains all website files
• index.html is the default homepage
Helpful Links
• www.w3schools.com/html
• http://www.htmlandcssbook.com/code-samples/
• www.w3schools.com/css
• www.w3schools.com/js
• http://www.javascriptfreecode.com