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
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
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
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/view- source.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