O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Introduction to HTML

1.167 visualizações

Publicada em

Publicada em: Educação
  • Seja o primeiro a comentar

Introduction to HTML

  1. 1. Web Programming and Design Introduction to HTML Dr. Abzetdin ADAMOV Chair of Computer Engineering Department aadamov@qu.edu.az http://ce.qu.edu.az/~aadamov
  2. 2. What you need to have• Running computer• Text editor  NotePad  EmEditor• Web Browser  Chrome  Internet Explorer  Firefox  Safari• Somewhere to save your work  Note: You don’t have to work online!
  3. 3. How to use the materials• Open text editor• Type/Edit your HTML• Hit ‘File → Save As’• Change ‘Save as Type’ option  Make it read ‘Save as Type: All files’• If that is not an option, put the name in quotes• Save our test page as “test.html”• Point web browser to the file location  Type something similar to D:/CODES/HTML/test.html in the browser bar
  4. 4. Tags• Tags tell a browser (Chrome, Internet Explorer, Firefox, ect) how to interpret them and arrange information• Tags start with ‘<‘ and end with ‘>’• Normally tags come in pairs, and the closing tag starts with ‘</’• Examples  <b>This is bold</b> and this is  <u>Underlined!</u>
  5. 5. Tags Basically, a computer sees an "A" as simply an "A" - whether it is bold, italic, big or small. To tell the browser that an "A" should be bold we need to put a markup in front of the A. Such a markup is called a Tag. All HTML tags are enclosed in < and >. Example: A piece of text as it appears on the screen: This is an example of bold text. HTML: the HTML for the above example: This is an example of <b>bold</b> text.
  6. 6. Basic Structure<html> <head> <title> Title of your page here! </title> Metatags… JavaScript… CSS… </head> <body> Content goes here! </body></html>
  7. 7. HEAD SECTION The head section of the webpage includes all the stuff that does not show directly on the resulting page. The <title> and </title> tags encapsulate the title of your page. The title is what shows in the top of your browser window when the page is loaded. Another thing you will often see in the head section is metatags. Metatags are used for, among other things, to improve the rankings in search engines. Quite often the head section contains javascript which is a programming language for more complex HTML pages. Finally, more and more pages contain codes for cascading style sheets (CSS). CSS is a rather new technique for optimizing the layout of major websites.
  8. 8. BODY SECTIONThe body of the document contains all that can be seen when the userloads the page. Text (Formatting, Resizing, Layout, Listing) Links (local pages, pages at other sites, bookmarks) Images (Inserting images, adding a link to an image) Backgrounds (colors, images, fixed image) Tables Frames Forms Hexadecimal Colors
  9. 9. First tags• <b> and </b> • bolds• <i> and </i> • italicizes• <u> and </u> • underlines• <center> and </center> • Puts in the center of the page, or ‘aligns center’
  10. 10. First tags• <strong> and </strong>• <big> and </big>• <em> and </em>• <small> and </small>• <del> and </del>• <strike> and </strike>• <pre> and </pre>• <code> and </code>• <blockquote> and </blockquote>
  11. 11. More basics <h1> and </h1>  Headers preset to help define sections  Six different choices down to <h6> and </h6> The <br /> and <nobr> tags  Causes a line break  Difference between <b>this is bold</b> and <b> This is bold <br /> and there is a line break</b>  Why is there not a </br>?  <nobr> tag is used to instruct the browser not to break into new line the specified text <p> and </p>  Paragraph tag
  12. 12. The 16 Basic Color Names
  13. 13. Extended Color Names
  14. 14. Color Names, RGB, Hexadecimal
  15. 15. Some useful Stuff• <pre> and </pre> - preformatted• <sub> and </sub> - sub script• <sup> and </sup> - superscript• How to put in symbols  &nbsp; and others  http://www.w3schools.com/tags/ref_entities.as p
  16. 16. Comments• Start with <!-- and end with -->• Comments are special tags• You can type whatever you want in the middle• Example  <!-- This is where the music section of my page starts -->
  17. 17. The <hr /> tag Horizontal rule Use these sparingly!! Attributes  Width  Align  Size  Default of 2 (pixels tall)  Noshade  True or false  Color
  18. 18. The <hr /> tag Horizontal rule Use these sparingly!! Attributes  Width  Align  Size  Default of 2 (pixels tall)  Noshade  True or false  Color
  19. 19. Lists <ul> and </ul> stand for un-ordered list  Aka this is a list with bullets <ol> and </ol> stand for ordered lists 1. First Item 2. Second 3. Ect <li> and </li> stand for list item  These are used inside the <ul></ul> and <ol></ol> tags
  20. 20. Unordered Lists <ul> and </ul> stand for ordered list  “type” property specifies the leading symbol in front of each list item, possible values: circle, disk, square Example: <ul type=“squeare”>  One  Two  Three
  21. 21. Ordered Lists <ol> and </ol> stand for ordered list  “type” property specifies the leading symbol in front of each list item, possible values: 1, i, I, a, A  “start” property specifies the starting value  “value” property lets to interrupt standard sequence Example: <ul type=“A”> A. One B. Two C. Three
  22. 22. Lists, Examples <ul>  <li>This is the first item</li>  <li>This is the second</li>  <li><ol>  <li>This item will be numbered</li>  <li>So will this one!</li>  </ol></li>  <li>the last un-ordered item</li> </ul> Note how the tags match up, a starting tag always has a closing tag
  23. 23. Adding images <img src=‘where is the image’ /> Why is there no </img> ? What else can I do?  Align the image (center it, ect)  Resize the image (height and width)  Use alt and title What is the difference? Alt is alternative text Title is the title of the image  Add a border  Define horizontal and vertical spaces  Use image as a link or background image
  24. 24. Image Properties src – source of image file (path/name) align – image position related to other objects (left, right, top, bottom, middle, …) alt – alternative text will be shown in the case if image can’t be displayed title – descriptive text for the image border – define thickness of frame along the perimeter of image vspace – define the vertical space between image and other objects hspace – define the horizontal space between image and other objects
  25. 25. Links! <a href=‘http://www.google.com’> Go to Google! </a> Hypertext reference What else can you do?  Make an image a link  Link to different places in your own page  Uses ‘anchors’ Relative versus Absolute links  Absolute is normally the way to go when you are starting out!
  26. 26. Links Levels To different domain / machine <a href=“http://ce.qu.edu.az/intro/go.html”>...</a> To same domain and different directory <a href=“docs/page2.html”>...</a> Link to file in same directory <a href=“about.html”>...</a> Internal Link or Anchor <a href=“#chapter1”>...</a> <a name=“chapter1”>...</a>
  27. 27. Link’s Properties target – specifies the target window where linked document will be opened. Possible values: _blank, _parent, _self, _top (default value is _self) title – specifies descriptive information about a link. This text appears when the mouse pointer hovers on the link. This property is in term of SEO Example: <a href=“http://www.qu.edu.az” target=“_blank” title=“Qafqaz University Website”>
  28. 28. The email link Add mailto:myaddress@whereever.com Example  <a href=‘mailto:john@bellsouth.net’>Email John! </a> Add a subject  Add ‘?subject=your subj here’ to the end  <a href=‘mailto:john@bellsouth.net?subject=this is an email from your website, john_at_bellsouth.com’> Email John! </a> You can add cc and bcc fields too  After the subject, use ‘&cc=copy_to_me@bellsth.net’ or add ‘&bcc=a@a.com’ or both
  29. 29. The BODY tag Attributes  Bgcolor  Text  Link  Alink  Vlink  Background
  30. 30. The BODY properties bgcolor – defines the background color of webpage text – defines the default color of text link – specifies the default color of all links alink – specifies color of active link (a link become active once user clicks on it) vlink – specifies color of visited links
  31. 31. META tags META tags help search engines find your page Between <head> and </head> Examples  <meta name=‘keywords’ content=‘cool,page,first,HTML,attempt’>  <meta name=‘description’ content=‘my first try at making a web page with HTML, come check it out’>  <meta name="robots" content="index, follow"> What is purpose <META HTTP-EQUIV="refresh" content="2;URL=http://www.yoursite.com/newpa ge.htm">
  32. 32. META tags examples <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,DHTML,CSS,JavaScript,Web Design"> <meta name="author" content="Abzetdin Adamov"> <meta name="copyright" content="A.Adamov 2012"> <meta http-equiv="location" content="http://my.qu.edu.az"> <meta http-equiv="refresh" content=“5"> <meta http-equiv="refresh" content="2; URL=http://ieee.qu.edu.az"> <meta name="robots" content="index, follow"> <meta name="robots" content=“noindex, nofollow"> <meta name=“googlebot" content=" noindex">
  33. 33. Tables• Tables are created out three main parts, or tags• The <table> and </table> tag tells the browser that you are creating a table• The table row tags (<tr> and </tr>) create a single row• The table division tags (<td> and </td>) create a single cell within a row
  34. 34. Table, basic example• <table>  <tr> <td>This is the top left cell</td> <td>This is the top row, right cell</td>  </tr>  <tr> <td>This is the bottom row, left cell</td> <td>this is the bottom row, right cell</td>  </tr> This is the top left This is the top row,• </table> cell right cell This is the bottom This is the bottom row, left cell row, right cell
  35. 35. So why the <table> ?• The <table> tag allows us to give attributes to the table as a whole• Border• Cell Spacing  The space in between one cell and another• Cell Padding  The space in between the edge of one cell and the actual content in that cell (normally text)• Bgcolor• Background
  36. 36. The TABLE’s properties• width – specifies width of table in pixels or %• height – specifies height …• align – alignment of table (left, right, center)• border – specifies the visibility of table’s borders• bgcolor – defines background color of table• background – defines background image of table• bordercolor – specifies the color of borders• cellspacing – sets the space between cells• cellpadding – sets the space between data and cell’s borders• bordercolorlight – creates a 3D lighting effect• bordercolordark – creates a 3D lighting effect
  37. 37. Review Tags are the main parts of html Tags can be changed with attribute values <font color=“red”>hello</font>  <font> is the opening tag  Color is an attribute of the font tag  </font> is the closing tag Most tags apply to a section of code, and need a closing/ending tag Some tags, like <br /> and <img /> do not  The correct way to ‘close’ these tags is the /> ending  Most of the time they will work without it  99% of the time, <br /> and <br> will do the same thing
  38. 38. Adding sounds Link to the file Use the <embed /> tag  Src  Width, height Good values are 144 width and 60 height  Autostart True or false  Loop True or false  Hidden True or false
  39. 39. Tags we know<html> <center> <big> <font> <title> <small> <strong> <basefont> <meta> <strike><head> <h1>,<h2>,<h3> <img> <hr>,<ul>, ….<h6> <ol>,<li><body> <br> <p> <pre>,<sub>, <table> <blockquote> <sup> <code> <q><b> <u> <a> <embed> <td>,<i> <s> <tr>,<td>
  40. 40. Lets build a simple site If you haven’t already, create a folder to store your HTML  I Recommend C:/HTML for now, its easy to remember Freely create three different pages Remember the basic HTML structure Don’t fret, I will walk you through all of this, so if you don’t know where to start its ok You will make mistakes, that’s ok too. Its part of learning
  41. 41. Final notes Good places to learn more  http://www.w3schools.com/html/  http://www.davesite.com/webstation/html/ Don’t try to memorize every HTML tag you see  All you need to know is what is possible  You can look up the specific tag  Aka, I would search ‘how do you create a table in HTML’ to find the specific tags
  42. 42. Want to know more A common way to layout the content on your page is to make a large table  Check out http://www.w3schools.com/html/tryit.asp? filename=tryhtml_layout You might see the word ‘deprecated’ a lot when learning  This means there is a ‘newer’ way to do the same thing  This happens for a lot of reasons (simpler code, makes more sense, ect)  Normally the old way will still work, so don’t stress to much, its not the end of your site and you don’t have to ‘update’
  43. 43. So what’s next? Style Sheets  Why??? See http://www.w3schools.com/html/html_whyuseht ml4.asp “The original HTML was never intended to contain tags for formatting a document…In HTML 4.0 all formatting can be removed from the HTML document and stored in a separate style sheet.” Hence, next weeks lesson is on CSS, or Cascading Style Sheets
  44. 44. QUESTIONShttp://ce.qu.edu.az/~aadamov