HTML/CSS Class 1:  HTML Basics        Alexis Goldstein           @alexisgoldstein         alexis@alexisgo.com  These slide...
Introductions • Before we begin, I’d like to learn a little bit    more about everyone here! • Can you please introduce yo...
Goals for Today  We hope that by the end of class today:• You will have mastered some of the basic terms  & jargon.• You w...
What is HTML?• HTML stands for Hyper Text Markup Language • HTML is not actually a   programming language! It’s a   markup...
What is a Markup Language?•   A system for annotating text.•   Comes from publishing industry: you mark up    a manuscript...
What is HTML?• HTML is a markup language that describes    webpages.    • It tells our browsers how to layout the      pag...
What does HTML look like?• Right-click on ANY website, and  choose “View Source”• You can see the HTML and CSS of  every s...
What does HTML look like?<html>  <body>         <h1>My First Heading</h1>         <p>My first paragraph.</p>  </body></html...
HTML: A Brief History• 1989: Tim Berners-Lee invents the Web   with HTML as its publishing language  • Berners-Lee was wor...
HTML: A Brief History• The HTML that Berners-Lee created was   based on SGML (Standard Generalized   Mark-up Language)  • ...
HTML: A Brief History• 1994: • HTML 2 specification is released. • Netscape is formed. Begins adding to      HTML without c...
HTML: A Brief History•   1995:    • HTML is extended with lots of new tags,      including ones for formatting like BGCOLO...
HTML: A Brief History• To learn more: • http://www.w3.org/People/Raggett/     book4/ch02.html  • Steven Johnson’s “Where G...
HTML vs. CSS• CSS stands for Cascading Style  Sheets.  • We will cover CSS in detail in class 2.• How does HTML fit in with...
HTML vs CSS• HTML defines the content of a  document:     This is a HEADING     • this is a new bullet! • CSS defines the fo...
HTML/CSS and Browsers• You can think of HTML and CSS as languages that web browsers speak • Your Internet Explorer, Firefo...
Free HTML/CSS editors• You don’t need anything more sophisticated than  Notepad (on a PC) or TextEdit (on a Mac) to build ...
Other Useful Tools• Another great way to learn HTML is to inspect  HTML elements on webpages you visit.• There are two too...
Onward to the Jargon• HTML Terms: • Tag   • Opening Tag   • Closing Tag • Element
HTML term: Tag• HTML surrounds your text with what’s called    a “tag”•   Tags describe what the content is (is it a    pa...
Learning HTML tags• You learn HTML one tag at a time.• We are going to start by learning the following tags:  • html, head...
First things first:What is HTML? Doctype • The very first thing on an HTML page is    the doctype.• Doctype tells us what ki...
Beginning our page in Aptana• Open up Aptana.• Go to File > New > Untitled HTML file.• You should get a new page that looks...
Basic tags: html, head, title• The first tag were going to add is <html>. • Make sure you add the opening and closing   tag...
Basic tags: html, head, title• After <html>, the next tag well add is     <head>.•    The head tag allows you to define    ...
Nesting of HTML tags• Some tags can be nested within other tags.• title, for example, is nested inside the head   tag:   <...
Status Check  Now close head. And close html.So far, you should have something like this: <!DOCTYPE html PUBLIC "-//W3C//D...
HTML term: Element• A starting tag + some text/content + an    ending tag is called an HTML Element.•   Examples of elemen...
More HTML Tags: body• The next tag we will add is <body>.• The body element typically contains  the main content of your p...
 More HTML Tags: p, h1-h6• h1-h6 creates Headers of varying sizes.  h1 is the largest header.• strong creates bold text. •...
 Experimenting with Text and Headings• Lets play around with the tags p, h1 - h6, and strong.• Add some text to your page....
Spacing your content• There are three main ways to add whitespace  around your content:  •   p  •   br  •   &nbsp;• p we a...
Spacing your content• Let’s give this a try.• Add a few <p> elements, <br/> tags and &nbsp; to your page.
Self-Closing Tags• The <br/> tag is our first example of a self-closing tag.
Self-Closing Tags• Tags usually come in pairs...but not always   • Most tags have a starting and ending tag.   • However, ...
More HTML Tags: a• The tag a is probably one of the most  frequently tags in all of HTML.• It links you to an external pag...
Our first look at HTML attributes• Were going to specify where the link  should take the user to.• We use an HTML attribute...
 HTML Term: Attribute• Attributes provide additional information  about HTML elements. • Attributes are formatted like thi...
More HTML Tags: a• Let’s try adding some a tags with  href attributes to our page. • <a href="http://www.twitter.com">Go t...
More HTML Tags: img• Another very common HTML tag is  the img tag, which creates images.• The img tag has lots of attribut...
More HTML Tags: img• The img tag has lots of attributes you  can specify. • alt: Specifies an alternate text for an   image...
More HTML Tags: img• Let’s try adding a few images to our  page.• Search on google to find a few images.• Right-click the i...
 More HTML Tags: table • The main column of the Girl Develop IT homepage is divided into two subsections: one white, one p...
Adding a table to our page • Tables are composed of rows and columns.    • Rows in HTML are denoted by the tag tr.    • Co...
 Adding a table to our page • Copy/paste this into your page.•         <table>                  <tr>                      ...
HTML Comments• <!-- is the starting tag of a comment.• --> is the ending tag of a comment. • Anything in between <!-- and ...
HTML Validation• A good way to make sure your HTML is valid, and doesnt have any errors, is to validate it.• Aptana can do...
Using Firebug to learn more• Demo!
Your Homework• As a homework assignment, you should:• 1) Review the following links on    w3schools, a great online resour...
Extra Topics • Time permitting!
How do I create a website?1. Register a Domain2. Get Hosting for that   Domain
Jargon Alert! DOMAIN               Domain   http://www.something.com                                   Suffix  DOMAIN REGIS...
Step One: Registering a Domain• Lots of choices:  • godaddy.com  • register.com  • dreamhost.com  • networksolutions.com• ...
Step Two: Getting Hosting for the• Once you’ve secured the domain, you need a    way to make it available for others to se...
Jargon Alert!                     SERVER  I’m so             A server is just a computer! lonely...           A dedicated ...
How Do Servers Receive your Request?• When someone types in your domain (blahblah.com), how does your request get to the s...
Jargon Alert!IP ADDRESSThe “address” of your computer. It tellsthe Internet how to connect to a givenmachine.Every single ...
Hosting your Domain, Continued• A dedicated server will allow multiple people  to connect to your site at the same time.
Hosting your Domain, Continued• A good hosting company will allow many    thousands of people to simultaneously view    yo...
Hosting your Domain, Continued• Who should I use for hosting?• Again, you have lots of choices. Some common  ones:  • goda...
Upcoming SlideShare
Loading in...5
×

Class1slides

1,183

Published on

Slides from the first class in Girl Develop It's four-part HTML/CSS series.

1 Comment
0 Likes
Statistics
Notes
  • Dear, Beloved in God l am interested to your art work please read my message bellow and get back to me,
    I am Mrs. Sarah Williams from France But I married to late Mr. Mark Williams in Ghana West Africa after our marriage for quite 11years we couldn’t produce any child. And my late husband was an international business man, may his soul rest in peace. Before his death two years ago
    I have been suffering from cancer of breast, which have took me so much money and nothing was done to cure it after all the treatment I have been taking, to my greatest surprise some days ago my doctor told me that I may not live more than two months and die as the result of the sickness. And We deposit the amount of $20.Million US dollars in one of the International Security Company Bank here in Ghana West Africa for our business investment before my late husband died, And I have donated part of this money to less privileges like poor widows, orphans disables and build churches in AMERICA ,EUROPEAN AND AFRICA AND ASIA.
    But now I decided to donate this amount $4.5Million US Dollars for the help of the less privileges ,poor widows, orphans disables and build churches in your country As result of my short stay on earth, since we couldn’t produce any child to inherit the money as next of kin and our properties now I was touched in spirit to donate the money to you for the good work of God despite that you are an Artist and we have never see each other before but God know the reason why he chosen you to handle this project for him because through your help to me the poor and others in needs will be save and survived and your Artist business will be establish because I am willing and ready to give you 25% of the money after the security company transfer the money to you in your country. So if you are interested to help me as God chosen you , please send me your contact details ,Your Home address or your office address together with your photos and telephone number so that I will know who you are very well and send my own details to you to me know me and after that I will introduce you to the Bank where my late husband deposited the fund and I will give them other to transfer this fund direct to you in your country for the God project .
    Am looking forward to your prompt reply (sarahwillims17@hotmail.com)

    Mrs. Sarah Williams.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
1,183
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Class1slides

  1. 1. HTML/CSS Class 1: HTML Basics Alexis Goldstein @alexisgoldstein alexis@alexisgo.com These slides are available at: http://bit.ly/GDIhtml1
  2. 2. Introductions • Before we begin, I’d like to learn a little bit more about everyone here! • Can you please introduce yourself, and tell us why you’re here and what you hope to learn.
  3. 3. Goals for Today We hope that by the end of class today:• You will have mastered some of the basic terms & jargon.• You will know the most common HTML tags.• You will have built a very simple, HTML-only webpage.• Time permitting: You will understand the basics of web servers, and what they are used for.
  4. 4. What is HTML?• HTML stands for Hyper Text Markup Language • HTML is not actually a programming language! It’s a markup language.
  5. 5. What is a Markup Language?• A system for annotating text.• Comes from publishing industry: you mark up a manuscript prior to publishing. • The revisions (mark up) editors make for the designers, so they know how to lay it out. • They were traditionally done in blue pencil on author’s manuscripts.• Other markup languages you may have heard of: LaTeX, XML
  6. 6. What is HTML?• HTML is a markup language that describes webpages. • It tells our browsers how to layout the page. • It describes webpages using markup tags. • We usually just refer to HTML’s markup tags as “HTML tags”• I like to think of HTML as one of the main languages of websites.
  7. 7. What does HTML look like?• Right-click on ANY website, and choose “View Source”• You can see the HTML and CSS of every single website on the web! • HTML/CSS are open platforms.
  8. 8. What does HTML look like?<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body></html>Try this yourself! Go to: http://w3schools.com/html/tryit.asp?filename=tryhtml_intro
  9. 9. HTML: A Brief History• 1989: Tim Berners-Lee invents the Web with HTML as its publishing language • Berners-Lee was working at CERN in Switzerland, a particle physics lab. • Since particle physics often requires international collaboration, Berners-Lee wanted to create a way for researchers all over the world to share information easily.
  10. 10. HTML: A Brief History• The HTML that Berners-Lee created was based on SGML (Standard Generalized Mark-up Language) • SGML was used to mark up text into structural units such as paragraphs, headings, and list items.• HTML added something new: the hypertext link--what we’ve come to know of today as just “links”
  11. 11. HTML: A Brief History• 1994: • HTML 2 specification is released. • Netscape is formed. Begins adding to HTML without consulting international community. • World Wide Web Consortium (aka the w3 consortium) is formed to “fulfill the potential of the Web through the development of open standards.”
  12. 12. HTML: A Brief History• 1995: • HTML is extended with lots of new tags, including ones for formatting like BGCOLOR and FONT FACE. •“You’re not supposed to do that with HTML!” • HTML 3 is released. • Internet Explorer browser comes out. • Netscape submits a proposal for FRAMES.• 1998: HTML 4• 2010: HTML 5 in development, draft submitted.
  13. 13. HTML: A Brief History• To learn more: • http://www.w3.org/People/Raggett/ book4/ch02.html • Steven Johnson’s “Where Good Ideas Come From”
  14. 14. HTML vs. CSS• CSS stands for Cascading Style Sheets. • We will cover CSS in detail in class 2.• How does HTML fit in with CSS? • CSS was created to allow the separation of document content from document presentation.
  15. 15. HTML vs CSS• HTML defines the content of a document: This is a HEADING • this is a new bullet! • CSS defines the formatting and style of the content your website. • I am some blue text! • I am Monaco font!
  16. 16. HTML/CSS and Browsers• You can think of HTML and CSS as languages that web browsers speak • Your Internet Explorer, Firefox, Chrome or Safari Browser reads the HTML and CSS on a webpage, and creates what you see.
  17. 17. Free HTML/CSS editors• You don’t need anything more sophisticated than Notepad (on a PC) or TextEdit (on a Mac) to build an HTML page. • However, it is often easier to use an HTML editor. • Here are some free ones: • Aptana (Windows, Mac OS 10.5+, Linux): http://www.aptana.com/products/studio2/ download • Komodo (Windows, Mac OS 10.4+, Linux): http://www.activestate.com/komodo-edit note, free trial only
  18. 18. Other Useful Tools• Another great way to learn HTML is to inspect HTML elements on webpages you visit.• There are two tools that can help you do this: • The Chrome browser has a right-click (control-click on a mac!) and “Inspect Element” tool built in • The Firefox browser has an extension called Firebug that also allows you to “Inspect Element”
  19. 19. Onward to the Jargon• HTML Terms: • Tag • Opening Tag • Closing Tag • Element
  20. 20. HTML term: Tag• HTML surrounds your text with what’s called a “tag”• Tags describe what the content is (is it a paragraph of text? A heading? A table? A list of items?)• Tags are surrounded by angle brackets <>• Tags usually come in pairs: • Starting tag: <html> • Ending tag: </html>
  21. 21. Learning HTML tags• You learn HTML one tag at a time.• We are going to start by learning the following tags: • html, head, title • body • p, h1-h6, strong• We will then move on to: • a, img • table
  22. 22. First things first:What is HTML? Doctype • The very first thing on an HTML page is the doctype.• Doctype tells us what kind of standards the page is using.  • It is an instruction to the web browser about what version of the markup language the page is written in.• To read more: http://www.w3schools.com/ tags/tag_doctype.asp
  23. 23. Beginning our page in Aptana• Open up Aptana.• Go to File > New > Untitled HTML file.• You should get a new page that looks like this:
  24. 24. Basic tags: html, head, title• The first tag were going to add is <html>. • Make sure you add the opening and closing tags: <html> and </html>. • If you are using Aptana, this should happen automatically
  25. 25. Basic tags: html, head, title• After <html>, the next tag well add is <head>.• The head tag allows you to define metadata for search engines, as well as things like the pages title.• Lets change the default <title> to Girl Develop It!  
  26. 26. Nesting of HTML tags• Some tags can be nested within other tags.• title, for example, is nested inside the head tag: <head>     <title>Girl Develop IT!</title> </head>Now open the browser, and were going to useour browser to open the HTML file wevecreated, and see how it looks thus far
  27. 27. Status Check Now close head. And close html.So far, you should have something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />        <title>Girl Develop It!</title>    </head></html>
  28. 28. HTML term: Element• A starting tag + some text/content + an ending tag is called an HTML Element.• Examples of elements: • <p>this is my great paragraph. I really hope you like it, I put a lot of thought into it. No, really, I did.</p> • <strong>this is some bold text!!</b>• Element = <tag> + text + </tag>
  29. 29. More HTML Tags: body• The next tag we will add is <body>.• The body element typically contains the main content of your page. • Remember, the body element means: <body> + some content + </body>
  30. 30.  More HTML Tags: p, h1-h6• h1-h6 creates Headers of varying sizes. h1 is the largest header.• strong creates bold text. • p creates a new paragraph of text.
  31. 31.  Experimenting with Text and Headings• Lets play around with the tags p, h1 - h6, and strong.• Add some text to your page. If you need inspiration, you can copy/paste the text on this slide. Were going to add some tags to vary the size and weight of the font.• Try wrapping one sentence in h1 tags, and see what happens: <h1>This is a h1 element</h1> <strong>Try wrapping another sentence in strong tags</strong> <p>try wrapping a long block of text in p tags</p>
  32. 32. Spacing your content• There are three main ways to add whitespace around your content: • p • br • &nbsp;• p we already learned about.• br stands for break, and will create a new line break. It looks like this: <br/>• &nbsp; stands for non-breaking space, and will create one literal space ( ).
  33. 33. Spacing your content• Let’s give this a try.• Add a few <p> elements, <br/> tags and &nbsp; to your page.
  34. 34. Self-Closing Tags• The <br/> tag is our first example of a self-closing tag.
  35. 35. Self-Closing Tags• Tags usually come in pairs...but not always • Most tags have a starting and ending tag. • However, some tags are “self-closing” tags. •They don’t require a closing tag, because you don’t have anything to sandwich between them. •All the information you need is in the first tag! • Example self-closing tags: br, img
  36. 36. More HTML Tags: a• The tag a is probably one of the most frequently tags in all of HTML.• It links you to an external page, or a sub-section of your own page.• <a href="http://www.twitter.com">Go to Twitter!</a>• Try it yourself: http://w3schools.com/ tags/tag_a.asp
  37. 37. Our first look at HTML attributes• Were going to specify where the link should take the user to.• We use an HTML attribute to specify where we want the a tag to link to.
  38. 38.  HTML Term: Attribute• Attributes provide additional information about HTML elements. • Attributes are formatted like this: attr="value"• Attributes are always specified in the opening tag.• Attribute values should always be in quotes. • An example: in <a href="http://www.google.com">, href is the attribute.
  39. 39. More HTML Tags: a• Let’s try adding some a tags with href attributes to our page. • <a href="http://www.twitter.com">Go to Twitter!</a> • I’m taking a class with <a href=”http:// www.girldevelopit.com”>Girl Develop It</a> • My guilty pleasure is reading <a href=”http:// www.gawker.com”>Gawker</a>.
  40. 40. More HTML Tags: img• Another very common HTML tag is the img tag, which creates images.• The img tag has lots of attributes you can specify. • The most important one is the src attribute. • Without a src, you won’t display an image!
  41. 41. More HTML Tags: img• The img tag has lots of attributes you can specify. • alt: Specifies an alternate text for an image. Used by search engines, and by screen readers. • height • width
  42. 42. More HTML Tags: img• Let’s try adding a few images to our page.• Search on google to find a few images.• Right-click the image and choose “copy image location”• Paste the URL into your src attribute: • <img src=”http://...” />
  43. 43.  More HTML Tags: table • The main column of the Girl Develop IT homepage is divided into two subsections: one white, one pink.• These two sections are both contained within an HTML table.• http://www.w3schools.com/tags/ tag_table.asp
  44. 44. Adding a table to our page • Tables are composed of rows and columns. • Rows in HTML are denoted by the tag tr. • Columns are the tag td. • Let’s try this at the w3schools: http:// w3schools.com/tags/tag_table.asp
  45. 45.  Adding a table to our page • Copy/paste this into your page.•     <table>                 <tr>                     <td>              <!-- left column section -->                     </td>                                                      <td>                         <!-- right column section -->                     </td>                 </tr>                 <tr>                     <td colspan=2>                     </td>                 </tr>        </table>
  46. 46. HTML Comments• <!-- is the starting tag of a comment.• --> is the ending tag of a comment. • Anything in between <!-- and --> will be ignored by the browser. • This is a great way to make notes to yourself, or to take something off your page as an experiment, without deleting it.• <!-- this is my first comment! -->
  47. 47. HTML Validation• A good way to make sure your HTML is valid, and doesnt have any errors, is to validate it.• Aptana can do this for you.• You can also find many sites on the web that will allow you to copy/paste your code in, and it will point out any errors.
  48. 48. Using Firebug to learn more• Demo!
  49. 49. Your Homework• As a homework assignment, you should:• 1) Review the following links on w3schools, a great online resource: • The a tag: http://www.w3schools.com/tags/tag_a.asp • The img tag: http://www.w3schools.com/tags/tag_img.asp• 2) Go to the w3schools HTML tag list: http:// w3schools.com/tags/default.asp • Pick three tags we did NOT cover today • Experiment with the “Try it Yourself” links on the three tags you choose.
  50. 50. Extra Topics • Time permitting!
  51. 51. How do I create a website?1. Register a Domain2. Get Hosting for that Domain
  52. 52. Jargon Alert! DOMAIN Domain http://www.something.com Suffix DOMAIN REGISTRATION The process of claiming / reserving a domain name. Lasts for one year, then you must renew the domain if you want to keep it. Should not cost you more than $10/year.
  53. 53. Step One: Registering a Domain• Lots of choices: • godaddy.com • register.com • dreamhost.com • networksolutions.com• I recommend dreamhost
  54. 54. Step Two: Getting Hosting for the• Once you’ve secured the domain, you need a way to make it available for others to see!• You need someone to host your domain in order to use a domain you’ve registered.• A hosting service provides you with a server. • The server is what actually makes your website viewable from any browser, on any network, anywhere.
  55. 55. Jargon Alert! SERVER I’m so A server is just a computer! lonely... A dedicated computer that does nothing but sit around and wait for you to call.When someone types inyour domain(blahblah.com), the serverreceives the request, andserves you back thewebsite.
  56. 56. How Do Servers Receive your Request?• When someone types in your domain (blahblah.com), how does your request get to the server? • Through DNS: Domain Name System • DNS is like a phone book. • It takes a domain (blahblah.com) and looks up the IP address for that domain. This is the IP address of the server that hosts your domain.
  57. 57. Jargon Alert!IP ADDRESSThe “address” of your computer. It tellsthe Internet how to connect to a givenmachine.Every single computer that is connectedto the internet has a unique IP address.
  58. 58. Hosting your Domain, Continued• A dedicated server will allow multiple people to connect to your site at the same time.
  59. 59. Hosting your Domain, Continued• A good hosting company will allow many thousands of people to simultaneously view your site, with no crashes.• Even a good hosting service may not be able to prepare you for “The Oprah Effect” • If you are on Oprah, and a million people all try and access your site at once, your server may crash! • If you have plans to go on Oprah, hire a network specialist to guard your site against crashing!
  60. 60. Hosting your Domain, Continued• Who should I use for hosting?• Again, you have lots of choices. Some common ones: • godaddy.com • bluehost.com • rackspacecloud.com • dreamhost.com -- what I use and recommend• Comprehensive list: http://ietherpad.com/3GA5A4CG9F
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×