behind the Internet and WWW - Intro to HTML Unit 2 More HTML CSS Basics – Visually Styling Your Website Unit 3 More Advanced CSS Domain Names + Hosting
Like a switch, can alternate high level or low level of voltage – high represents a 1 and low represents a 0. – Therefore can send a digital signal – a stream of 1s and 0s
program (software) that listens for connections, and data being sent, and knows how to handle (and potentially respond) to that data. Server listening for incoming connections, and messages Popular Server Software: Apache (by far most popular) nginx Microsoft Internet Server
computers specifically designed to run server programs and be on 24/7 Data Centers, or “Server Farms” Sites aren’t usually served from home computers. They usually are served from Data Centers, or “Server Farms” that are large buildings filled with special hardware servers designed to always serve sites. Google’s Data Center. Those are all computers running servers
Usenet (via the SMTP + FTP protocol) – Text files people posted, and could then download to their own computers. – Discussion groups, and newsgroups. Largely via email. • Gopher – - organize files and information.
it. Hypertext (HTML documents) - Text that links to other text that can be immediately accessed - E.g. this is a link that goes somewhere else - HTML – Hypertext Markup Language HTTP Protocol - How do you respond to the request for an HTML document Tim Berner’s Lee is a gangster. - Wrote the first HTTP server, the first web browser, and the first web pages.
23 May 2005 22:38:34 GMT Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux) Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT Etag: "3f80f-1b6-3e1cb03b" Accept-Ranges: none Content-Length: 438 Connection: close - HTML CONTENT - GET a Resource from a machine: Get /aboutus.htmls HTTP/1.1 Host: www.sailthru.com/aboutus.html
is a browser? A program that knows how to interpret HTML, which is called compiling HTML (and CSS), in order to show us the right pixels on the screen!
interpret HTML into it’s visual form? – Different Screen Sizes, Different Resolutions, Different Devices! – W3C – World Wide Web Consortium sets the standards!
Lee – WorldWideWeb Browser • 1993 - Marc Andreesen – Mosaic – Netscape • 1995 Microsoft Internet Explorer • 1998 Netscape launches Mozilla foundation • 2003 Apple Safari • 2008 Google Chrome • (December 2011 – Chrome the most popular browser!)
to the 1960s, that connects computers together with cables that carry electricity. • World Wide Web is a software that introduced the idea of HTML webpages (linked documents), and the HTTP protocol for requesting and responding to requests for webpages • Servers are programs that listen for connections and handle requests, often running on machines specifically designed for that purpose. • Browsers know how to turn HTML into a visual representation
of the site we’re building: Alcove - Introduction to Tags - Structure of an HTML document - Doctype, HTML tags, Head Tags, Body Tags - “Hello World” – creating and viewing our first Web Page - Viewing source code in browsers - Document Object Model
types of content: <tag> content inside the tag </tag> Collection of tags that have certain meanings. They describe the content within them: <h1>This is a heading</h1> <p>This is a paragraph</p> Opening Tag Closing Tag
types of content: <tag> content inside the tag </tag> Collection of tags that have certain meanings. They describe the content within them: <h1>This is a heading</h1> <p>This is a paragraph</p> Opening Tag Closing Tag
This is a heading inside of a paragraph </h1> <h1> And this is another heading inside of the same paragraph </h1> </p> This is like a tree Of elements: p h1 h1 The paragraph contains two headings and some text. The headings are children of the paragraph. This is a heading inside a paragraph This is a another heading inside a paragraph This is a paragraph
learn different types of tags with different meanings, and how to use them. <p> Paragraphs <h1> Headings <div>,<span> Section/Division <ul>,<ol> Lists <a> Links <img> Images <table> Tables ….. And many more.
document</TITLE> </HEAD> <BODY> <P>Hello world!</P> </BODY> </HTML> Head Content Everything inside of the head tags describes information about the content of the web page (it doesn’t appear on the page). It is meta information. e.g. The title is what we see appear as the title on the tab/window, and the title of the page in Google Search results.
document</TITLE> </HEAD> <BODY> <P>Hello world!</P> </BODY> </HTML> Body Content This is the content of the page. This is what we see in the main browser window!
<!DOCTYPE html> <HTML> <HEAD> <TITLE> My first HTML document </TITLE> </HEAD> <BODY> <P>Hello world!</P> <P>Hear me roar <h1>ROAR</h1> </P> </BODY> </HTML> My first HTML document Hear me roar p h1 ROAR
Hypertext Markup Language - Tags provide meaning to the content - Structure of an HTML document - Doctype, HTML tags, Head Tags, Body Tags - “Hello World” – creating and viewing our first Web Page - Viewing source code in browsers - Document Object Model
a second item</li> <li>This is a third item. But the list is not numbered</li> </ul> e.g. • This is an item • This is a second item • And a third item. But the list is not numbered.
a second item</li> <li>This is a third item. And the list is numbered</li> </ol> e.g. 1. This is an item 2. This is a second item 3. And a third item. But the list is not numbered.
use the most: Defines a block of content/section within a document. Very general, primarily used to group things together you want to style in some way. <div> This is some content that should be grouped together. </div>
styling). Not a block of content. <span></span> <p> This is a paragraph with one portion of it here <span>that is in a span</span> because we want to make it bold or italic later. </p>
the content No line break. This is some text that is all in a paragraph except this is in a div so it occurs on it’s own line unlike a span This is some text that is all in a paragraph except this is in a span so it occurs inline with the paragraph unlike a span
No closing tag. Self-closing tag – not all tags have content between them (i.e. they don’t have a matching closing tag). You shouldn’t add newlines to do spacing. Visual styling should be left for CSS.
to use when grouping elements for items that are common on most webpages: headers, footers, and navigation. <header> </header> <footer></footer> <nav></nav> Add more semantic meaning than just div. Perfectly fine to use just div though.
to use when grouping elements for items that are common on most webpages: headers, footers, and navigation. <header> </header> <footer></footer> <nav></nav> Add more semantic meaning than just div. Perfectly fine to use just div though.
closing tags – enclose content within them e.g. Learned Paragraphs <p>some content</p> Heading <h1>some content</h1> Divs <div>some content</div> … etc. Coming Up Links <a>some content</a> And more..
e.g. <img src=‘http://useframe.com/shopify_logo.png’ width=’200px’ height=’55px’ /> SRC attribute specifies the location! where the image lives! Width attribute specifies how wide the browser should show the image! Height specifies how tall the browser should show the image!
e.g. <img src=‘http://useframe.com/shopify_logo.png’ width=’200px’ height=’55px’ /> SRC attribute specifies the location! where the image lives! Width attribute specifies how wide the browser should show the image! Height specifies how tall the browser should show the image!
that have matching opening/closing tags define the attributes on the opening tag. <tag attribute_name=“value”> </tag> Tags that don’t have matching closing tags. • <tag attribute_name=‘value’ /> Can use either single or double quotes to enclose the value.
the image file. width Recommended Width of the image height Recommended Height of the image. alt Recommended Text that displays for screen readers, or if the image can’t load.
images. Use PNG for everything else. GIF for animated images. Set the width and height explicitly - Otherwise the image will make the pa!ge content reflow after it loads (browser has no way to know how big it is unless you tell it).
Otherwise the image will make the page content reflow after it loads (browser has no way to know how big it is unless you tell it). Include Alt tags for usability purposes.
a section with an id attribute: <div id=‘second_section’></div> Then, make the href of the anchor tag be the id of the section prepended with #. <a href=‘#second_section’> </a>
for other developers and for yourself. • Helps readability potentially. • Doesn’t appear in the rendered version of the page in • the browser • Appears in the view source.
• Buying a domain name, and choosing a host • Different types of domain names and costs • WHOIS and private registration • Uploading via FTP • Root page: index.html
be using on the web Register the name, and point it to your host’s servers Hosting Company Where you will upload the files of your site to, and point the domain name to load from. e.g. www.yourdomainname.com Local Computer Hosting Company /images /css index.html menu.html apply.html contact.html
Servers /images /css index.html menu.html apply.html contact.html /images /css index.html menu.html apply.html contact.html (1) Upload files to hosting company’s server via FTP (2) Change DNS records to point domain name to the hosting company’s servers
GoDaddy www.godaddy.com Dreamhost www.dreamhost.com Mediatemple mediatemple.net/ iPages ipage.com 1and1.com www.1and1.com What you get – a place to easily serve static files from, a database
GoDaddy www.godaddy.com Dreamhost www.dreamhost.com Mediatemple mediatemple.net/ iPages ipage.com 1and1.com www.1and1.com What you get – a place to easily serve static files from, a database
shown as the homepage (i.e. their servers are usually set to route / to your index.html page.) Good organization for your files: /css (all css files go in here) /images (all image files go in here) index.html other.html favicon.ico
nicolaerusan
csswizardry
tomoyanonymous
mfonobong
orderedlist
reverentgeek
sferik
akosma
livdayseo
brettharned
inesmontani
thekraken
