Download presentation
Presentation is loading. Please wait.
1
Intro to HTML CS 1150 Fall 2016
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 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
10
Structure of an HTML Webpage
<!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
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 <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
13
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
14
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
15
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
16
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
17
HTML Paragraphs The HTML <p> element defines a paragraph
Note: Browsers automatically add some white space (a margin) before and after a paragraph
18
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
19
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>
20
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: source.html
21
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
22
CS Department Web Hosting
cs.mtsu.edu/~crn2k The public_html folder contains all website files index.html is the default homepage
23
Helpful Links www.w3schools.com/html
Similar presentations
