Intro to HTML CS 1150 Fall 2016 Web

Intro to HTML CS 1150 Fall 2016

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

HTML 5 • In this class, we will be learning HTML 5, 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 HTML 5 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> <head> </head> <body> <title>An Example HTML Webpage</title> <h 1>This is the Main Heading</h 1> This is a paragraph <h 2>This is a Sub-Heading</h 2> Many long articles have sub-headings. </html> </body> <h 2>Another Sub-Heading</h 2> Here is a paragraph below a sub-heading Here is another paragraph below a sub-heading 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 <h 1> to <h 6> tags • <h 1> defines the most important heading, while <h 6> defines the least important heading • Note: Browsers automatically add some white space (a margin) before and after a heading

HTML Paragraphs • The HTML 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 Paragraph in English Paragraphe en Français

Viewing the Source of a Webpage • • • Open a webpage • You should see a new window appear, and it will contain the source code that was used to create the webpage you opened • Click the View menu Select the option that says Source or View source (the title changes depending on what browser you are using 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/~crn 2 k • The public_html folder contains all website files • index. html is the default homepage

Helpful Links • www. w 3 schools. com/html • http: //www. htmlandcssbook. com/code-samples/ • www. w 3 schools. com/css • www. w 3 schools. com/js • http: //www. javascriptfreecode. com