Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Creating HTML Pages

16.086 Aufrufe

Veröffentlicht am

A short introduction of how to can take a 'template' for a webpage and create the HTML for it.

Veröffentlicht in: Software, Internet
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download Full doc Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download PDF EBOOK here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download Full doc Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download PDF EBOOK here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download Full doc Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download PDF EBOOK here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download Full doc Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download PDF EBOOK here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download Full doc Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download PDF EBOOK here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/u8fo9ww } ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Creating HTML Pages

  1. 1. webDEV@RGU creating html pages
  2. 2. Today Going to look at how we can create an HTML page from a ‘template’. We’ll use: http://www.rgu.ac.uk Two parts to this: 1. Looking at the template and splitting it into different sections 2. Creating the HTML for these individual sections
  3. 3. Template Deconstruction
  4. 4. this is the page we’ll be looking at
  5. 5. Header Quick Links Logo Search Bar Navigation
  6. 6. Main 3 sections
  7. 7. Header Form Navigation
  8. 8. Image
  9. 9. Article Article Article
  10. 10. Header Image Text (description)
  11. 11. Footer Heading Links
  12. 12. Creating the html
  13. 13. <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>RGU Homepage</title>
 </head>
 <body>
 
 </body>
 </html>
  14. 14. <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>RGU Homepage</title>
 </head>
 <body>
 <!--START OF HEADER -->
 <header>
 
 </header>
 <!--END OF HEADER -->
 
 <!--START OF MAIN -->
 <main>
 
 </main>
 <!--END OF MAIN -->
 
 <!--START OF FOOTER -->
 <footer>
 
 </footer>
 <!--END OF FOOTER -->
 </body>
 </html>
  15. 15. <header>
 <div id="quicklinks">
 <ul>
 <li><a href ="#">Home</a></li>
 <li><a href ="#">About</a></li>
 <li><a href ="#">RGYou</a></li>
 <li><a href ="#">Staff & Current Students</a></li>
 <li><a href ="#">A to Z</a></li>
 </ul>
 </div>
 
 <img id="rgu_logo" src="robertgordonlogo.jpeg" alt="Robert Gordon University"/>
 
 <div id="seachbox">
 <form>
 <p>Search</p>
 <input type="text" name="searchfield">
 <input type="submit" value="Go">
 </form>
 </div>
 
 <nav>
 <ul>
 <li><a href ="#">Areas of Study</a></li>
 <li><a href ="#">Future Students</a></li>
 <li><a href ="#">...</a></li>
 <li><a href ="#">Contact Us</a></li>
 </ul>
 </nav>
 </header> 1. Everything that we do in the header is contained within our <header> tags
  16. 16. <header>
 <div id="quicklinks">
 <ul>
 <li><a href ="#">Home</a></li>
 <li><a href ="#">About</a></li>
 <li><a href ="#">RGYou</a></li>
 <li><a href ="#">Staff & Current Students</a></li>
 <li><a href ="#">A to Z</a></li>
 </ul>
 </div>
 
 <img id="rgu_logo" src="robertgordonlogo.jpeg" alt="Robert Gordon University"/>
 
 <div id="seachbox">
 <form>
 <p>Search</p>
 <input type="text" name="searchfield">
 <input type="submit" value="Go">
 </form>
 </div>
 
 <nav>
 <ul>
 <li><a href ="#">Areas of Study</a></li>
 <li><a href ="#">Future Students</a></li>
 <li><a href ="#">...</a></li>
 <li><a href ="#">Contact Us</a></li>
 </ul>
 </nav>
 </header> Quick Links 1. Create a DIV to hold the information in 2. It is best to use an unordered list to create a series of links 3. Use the # symbol when we don’t yet know where the link is going to go
  17. 17. <header>
 <div id="quicklinks">
 <ul>
 <li><a href ="#">Home</a></li>
 <li><a href ="#">About</a></li>
 <li><a href ="#">RGYou</a></li>
 <li><a href ="#">Staff & Current Students</a></li>
 <li><a href ="#">A to Z</a></li>
 </ul>
 </div>
 
 <img id="rgu_logo" src="robertgordonlogo.jpeg" alt="Robert Gordon University"/>
 
 <div id="seachbox">
 <form>
 <p>Search</p>
 <input type="text" name="searchfield">
 <input type="submit" value="Go">
 </form>
 </div>
 
 <nav>
 <ul>
 <li><a href ="#">Areas of Study</a></li>
 <li><a href ="#">Future Students</a></li>
 <li><a href ="#">...</a></li>
 <li><a href ="#">Contact Us</a></li>
 </ul>
 </nav>
 </header> 1. Give the logo an id so that we can style it later in css 2. Use src to give the location of the logo 3. Give the image alternative text to aid with accessibility
  18. 18. <header>
 <div id="quicklinks">
 <ul>
 <li><a href ="#">Home</a></li>
 <li><a href ="#">About</a></li>
 <li><a href ="#">RGYou</a></li>
 <li><a href ="#">Staff & Current Students</a></li>
 <li><a href ="#">A to Z</a></li>
 </ul>
 </div>
 
 <img id="rgu_logo" src="robertgordonlogo.jpeg" alt="Robert Gordon University"/>
 
 <div id="seachbox">
 <form>
 <p>Search</p>
 <input type="text" name="searchfield">
 <input type="submit" value="Go">
 </form>
 </div>
 
 <nav>
 <ul>
 <li><a href ="#">Areas of Study</a></li>
 <li><a href ="#">Future Students</a></li>
 <li><a href ="#">...</a></li>
 <li><a href ="#">Contact Us</a></li>
 </ul>
 </nav>
 </header> 1. Contain the search box in a DIV and give it an ID to make styling easier in CSS 2. The search box should be contained within a form 3. Use the text input type to create the box 4. Use the submit input type to create the button 5. In the future we would add a location for this form to be sent to
  19. 19. <header>
 <div id="quicklinks">
 <ul>
 <li><a href ="#">Home</a></li>
 <li><a href ="#">About</a></li>
 <li><a href ="#">RGYou</a></li>
 <li><a href ="#">Staff & Current Students</a></li>
 <li><a href ="#">A to Z</a></li>
 </ul>
 </div>
 
 <img id="rgu_logo" src="robertgordonlogo.jpeg" alt="Robert Gordon University"/>
 
 <div id="seachbox">
 <form>
 <p>Search</p>
 <input type="text" name="searchfield">
 <input type="submit" value="Go">
 </form>
 </div>
 
 <nav>
 <ul>
 <li><a href ="#">Areas of Study</a></li>
 <li><a href ="#">Future Students</a></li>
 <li><a href ="#">...</a></li>
 <li><a href ="#">Contact Us</a></li>
 </ul>
 </nav>
 </header> 1. Similar to before when creating this navigation bar 2. Remember to use a list 3. This time, we can use the nav element to contain everything together
  20. 20. <header>
 <div id="quicklinks">
 <ul>
 <li><a href ="#">Home</a></li>
 <li><a href ="#">About</a></li>
 <li><a href ="#">RGYou</a></li>
 <li><a href ="#">Staff & Current Students</a></li>
 <li><a href ="#">A to Z</a></li>
 </ul>
 </div>
 
 <img id="rgu_logo" src="robertgordonlogo.jpeg" alt="Robert Gordon University"/>
 
 <div id="seachbox">
 <form>
 <p>Search</p>
 <input type="text" name="searchfield">
 <input type="submit" value="Go">
 </form>
 </div>
 
 <nav>
 <ul>
 <li><a href ="#">Areas of Study</a></li>
 <li><a href ="#">Future Students</a></li>
 <li><a href ="#">...</a></li>
 <li><a href ="#">Contact Us</a></li>
 </ul>
 </nav>
 </header>
  21. 21. <main> <!-- Section 1 -->
 <section>
 </section> <!-- Section 2 --> <section>
 </section> <!-- Section 3 --> <section>
 </section>
 </main> 1. Split the <main> into 3 <section> tags
  22. 22. <section>
 <h2>Search our courses</h2>
 <form>
 <input type="text" name="keywordbox" value="Enter Keyword">
 <select>
 <option value="compsci">Computer Science</option>
 <option value="digmed">Digital Media</option>
 <option value="network">Computer Network Management and Design</option>
 <option value="other">Other</option>
 </select>
 <input type="submit" value="search">
 </form>
 <ul>
 <li>Architeture, Construction & Surveying</li>
 <li>Business, Management & Accounting</li>
 <li>Engineering</li>
 <li>...</li>
 </ul>
 </section> 1. All of our content goes between the <section> tags
  23. 23. <section>
 <h2>Search our courses</h2>
 <form>
 <input type="text" name="keywordbox" value="Enter Keyword">
 <select>
 <option value="compsci">Computer Science</option>
 <option value="digmed">Digital Media</option>
 <option value="network">Computer Network Management and Design</option>
 <option value="other">Other</option>
 </select>
 <input type="submit" value="search">
 </form>
 <ul>
 <li>Architeture, Construction & Surveying</li>
 <li>Business, Management & Accounting</li>
 <li>Engineering</li>
 <li>...</li>
 </ul>
 </section> 1. Create our header for this section
  24. 24. <section>
 <h2>Search our courses</h2>
 <form>
 <input type="text" name="keywordbox" value="Enter Keyword">
 <select>
 <option value="compsci">Computer Science</option>
 <option value="digmed">Digital Media</option>
 <option value="network">Computer Network Management and Design</option>
 <option value="other">Other</option>
 </select>
 <input type="submit" value="search">
 </form>
 <ul>
 <li>Architeture, Construction & Surveying</li>
 <li>Business, Management & Accounting</li>
 <li>Engineering</li>
 <li>...</li>
 </ul>
 </section> 1. Create the form allowing people to search 2. use the text type for the first box 3. use a <select> for the second 1. Every option in the dropdown has to have an option 4. Use a submit type for the button
  25. 25. <section>
 <h2>Search our courses</h2>
 <form>
 <input type="text" name="keywordbox" value="Enter Keyword">
 <select>
 <option value="compsci">Computer Science</option>
 <option value="digmed">Digital Media</option>
 <option value="network">Computer Network Management and Design</option>
 <option value="other">Other</option>
 </select>
 <input type="submit" value="search">
 </form>
 <ul>
 <li>Architeture, Construction & Surveying</li>
 <li>Business, Management & Accounting</li>
 <li>Engineering</li>
 <li>...</li>
 </ul>
 </section> 1. Create an unordered list to hold all of the links 2. use <li> to hold each one spot the mistake…I should have done the following… <li><a href=“#”>My link text</a></li>
  26. 26. <section>
 <h2>Search our courses</h2>
 <form>
 <input type="text" name="keywordbox" value="Enter Keyword">
 <select>
 <option value="compsci">Computer Science</option>
 <option value="digmed">Digital Media</option>
 <option value="network">Computer Network Management and Design</option>
 <option value="other">Other</option>
 </select>
 <input type="submit" value="search">
 </form>
 <ul>
 <li>Architeture, Construction & Surveying</li>
 <li>Business, Management & Accounting</li>
 <li>Engineering</li>
 <li>...</li>
 </ul>
 </section>
  27. 27. <section> 
 <img src="advertbanner.png" alt="Top UK University for Graduate Employment - HESA Destination of UK Leavers Survey 2013/14. Published by HESA, August 2015”/> 
 </section> 1. Fairly easy section, just remember to include the alt text for the image. 1. If there is text in the image you should have the text in the ‘alt’ (screenreaders can’t read images)
  28. 28. <section>
 <!-- Article 1 -->
 <article>
 </article>
 
 <!-- Article 2 -->
 <article>
 </article>
 
 <!-- Article 3 -->
 <article>
 </article> 
 </section> 1. Split the 3 different articles into 3 different article tags and do each one
  29. 29. <article>
 <h3>Postgraduate Open Evening</h3>
 <img src="newsarticle1.png" alt="Postgraduate students talking">
 <p>Register to attend...</p>
 </article> 1. Contain everything inside the <article> tags
  30. 30. <article>
 <h3>Postgraduate Open Evening</h3>
 <img src="newsarticle1.png" alt="Postgraduate students talking">
 <p>Register to attend...</p>
 </article> 1. Put the article heading in <h3> tags
  31. 31. <article>
 <h3>Postgraduate Open Evening</h3>
 <img src="newsarticle1.png" alt="Postgraduate students talking">
 <p>Register to attend...</p>
 </article> 1. Remember to say where the image is (src) and what the images is (alt)
  32. 32. <article>
 <h3>Postgraduate Open Evening</h3>
 <img src="newsarticle1.png" alt="Postgraduate students talking">
 <p>Register to attend...</p>
 </article> 1. Put the text in a <p> tag
  33. 33. <article>
 <h3>Postgraduate Open Evening</h3>
 <img src="newsarticle1.png" alt="Postgraduate students talking">
 <p>Register to attend...</p>
 </article>
  34. 34. <section>
 <!-- Article 1 -->
 <article>
 <h3>Postgraduate Open Evening</h3>
 <img src="newsarticle1.png" alt="Postgraduate students talking">
 <p>Register to attend...</p>
 </article>
 
 <!-- Article 2 -->
 <article>
 <h3>Visit Us</h3>
 <img src="newsarticle2.png" alt="Sir Ian Wood Building">
 <p>Your chance to visit...</p>
 </article>
 
 <!-- Article 3 -->
 <article>
 <h3>International Students</h3>
 <img src="newsarticle3.png" alt="Students deep in thought">
 <p>Information for future...</p>
 </article>
 </section>
  35. 35. <footer>
 <h2>Connect with Us</h2>
 <ul>
 <li><a href="http://www.facebook.com"><img src="facebooklogo.png" alt="Facebook"></a></li>
 <li><a href="http://www.twitter.com"><img src="twitterlogo.png" alt="Twitter"></a></li>
 <li><a href="http://www.youtube.com"><img src="youtubelogo.png" alt="Youtube"></a></li>
 <li>...</li>
 </ul>
 </footer> 1. Contain everything within the <footer> tags
  36. 36. <footer>
 <h2>Connect with Us</h2>
 <ul>
 <li><a href="http://www.facebook.com"><img src="facebooklogo.png" alt="Facebook"></a></li>
 <li><a href="http://www.twitter.com"><img src="twitterlogo.png" alt="Twitter"></a></li>
 <li><a href="http://www.youtube.com"><img src="youtubelogo.png" alt="Youtube"></a></li>
 <li>...</li>
 </ul>
 </footer> 1. Create the heading for this section
  37. 37. <footer>
 <h2>Connect with Us</h2>
 <ul>
 <li><a href="http://www.facebook.com"><img src="facebooklogo.png" alt="Facebook"></a></li>
 <li><a href="http://www.twitter.com"><img src="twitterlogo.png" alt="Twitter"></a></li>
 <li><a href="http://www.youtube.com"><img src="youtubelogo.png" alt="Youtube"></a></li>
 <li>...</li>
 </ul>
 </footer> 1. Create the set of links 2. <ul> to create the unordered list 3. <li> for each item 4. <a> to let every image link to somewhere 5. <img> to have the image itself
  38. 38. <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>RGU Homepage</title>
 </head>
 <body>
 <!--START OF HEADER -->
 <header>
 <div id="quicklinks">
 <ul>
 <li><a href ="#">Home</a></li>
 <li><a href ="#">About</a></li>
 <li><a href ="#">RGYou</a></li>
 <li><a href ="#">Staff & Current Students</a></li>
 <li><a href ="#">A to Z</a></li>
 </ul>
 </div>
 
 <img id="rgu_logo" src="robertgordonlogo.jpeg" alt="Robert Gordon University"/>
 
 <div id="seachbox">
 <form>
 <p>Search</p>
 <input type="text" name="searchfield">
 <input type="submit" value="Go">
 </form>
 </div>
 
 <nav>
 <ul>
 <li><a href ="#">Areas of Study</a></li>
 <li><a href ="#">Future Students</a></li>
 <li><a href ="#">...</a></li>
 <li><a href ="#">Contact Us</a></li>
 </ul>
 </nav>
 
 </header>
 <!--END OF HEADER -->
 
 <!--START OF MAIN -->
 <main>
 <section>
 <h2>Search our courses</h2>
 <form>
 <input type="text" name="keywordbox" value="Enter Keyword">
 <select>
 <option value="compsci">Computer Science</option>
 <option value="digmed">Digital Media</option>
 <option value="network">Computer Network Management and Design</option>
 <option value="other">Other</option>
 </select>
 <input type="submit" value="search">
 </form>
 <ul>
 <li>Architeture, Construction & Surveying</li>
 <li>Business, Management & Accounting</li>
 <li>Engineering</li>
 <li>...</li>
 </ul>
 </section>
 
 <section>
 <img src="advertbanner.png" alt="Top UK University for Graduate Employment - HESA Desintation of Uk Leavers Survey 2013/14. Published by HESA, August 2015">
 </section>
 
 <section>
 <!-- Article 1 -->
 <article>
 <h3>Postgraduate Open Evening</h3>
 <img src="newsarticle1.png" alt="Postgraduate students talking">
 <p>Register to attend...</p>
 </article>
 
 <!-- Article 2 -->
 <article>
 <h3>Visit Us</h3>
 <img src="newsarticle2.png" alt="Sir Ian Wood Building">
 <p>Your chance to visit...</p>
 </article>
 
 <!-- Article 3 -->
 <article>
 <h3>International Students</h3>
 <img src="newsarticle3.png" alt="Students deep in thought">
 <p>Information for future...</p>
 </article>
 </section>
 
 </main>
 <!--END OF MAIN -->
 
 <!--START OF FOOTER -->
 <footer>
 <h2>Connect with Us</h2>
 <ul>
 <li><a href="http://www.facebook.com"><img src="facebooklogo.png" alt="Facebook"></a></li>
 <li><a href="http://www.twitter.com"><img src="twitterlogo.png" alt="Twitter"></ a></li>
 <li><a href="http://www.youtube.com"><img src="youtubelogo.png" alt="Youtube"></ a></li>
 <li>...</li>
 </ul>
 </footer>
 <!--END OF FOOTER -->
 </body>
 </html>
  39. 39. <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>RGU Homepage</title>
 </head>
 <body>
 <!--START OF HEADER -->
 <header>
 <div id="quicklinks">
 <ul>
 <li><a href ="#">Home</a></li>
 <li><a href ="#">About</a></li>
 <li><a href ="#">RGYou</a></li>
 <li><a href ="#">Staff & Current Students</a></li>
 <li><a href ="#">A to Z</a></li>
 </ul>
 </div>
 
 <img id="rgu_logo" src="robertgordonlogo.jpeg" alt="Robert Gordon University"/>
 
 <div id="seachbox">
 <form>
 <p>Search</p>
 <input type="text" name="searchfield">
 <input type="submit" value="Go">
 </form>
 </div>
 
 <nav>
 <ul>
 <li><a href ="#">Areas of Study</a></li>
 <li><a href ="#">Future Students</a></li>
 <li><a href ="#">...</a></li>
 <li><a href ="#">Contact Us</a></li>
 </ul>
 </nav>
 
 </header>
 <!--END OF HEADER -->
 
 <!--START OF MAIN -->
 <main>
 <section>
 <h2>Search our courses</h2>
 <form>
 <input type="text" name="keywordbox" value="Enter Keyword">
 <select>
 <option value="compsci">Computer Science</option>
 <option value="digmed">Digital Media</option>
 <option value="network">Computer Network Management and Design</option>
 <option value="other">Other</option>
 </select>
 <input type="submit" value="search">
 </form>
 <ul>
 <li>Architeture, Construction & Surveying</li>
 <li>Business, Management & Accounting</li>
 <li>Engineering</li>
 <li>...</li>
 </ul>
 </section>
 
 <section>
 <img src="advertbanner.png" alt="Top UK University for Graduate Employment - HESA Desintation of Uk Leavers Survey 2013/14. Published by HESA, August 2015">
 </section>
 
 <section>
 <!-- Article 1 -->
 <article>
 <h3>Postgraduate Open Evening</h3>
 <img src="newsarticle1.png" alt="Postgraduate students talking">
 <p>Register to attend...</p>
 </article>
 
 <!-- Article 2 -->
 <article>
 <h3>Visit Us</h3>
 <img src="newsarticle2.png" alt="Sir Ian Wood Building">
 <p>Your chance to visit...</p>
 </article>
 
 <!-- Article 3 -->
 <article>
 <h3>International Students</h3>
 <img src="newsarticle3.png" alt="Students deep in thought">
 <p>Information for future...</p>
 </article>
 </section>
 
 </main>
 <!--END OF MAIN -->
 
 <!--START OF FOOTER -->
 <footer>
 <h2>Connect with Us</h2>
 <ul>
 <li><a href="http://www.facebook.com"><img src="facebooklogo.png" alt="Facebook"></a></li>
 <li><a href="http://www.twitter.com"><img src="twitterlogo.png" alt="Twitter"></ a></li>
 <li><a href="http://www.youtube.com"><img src="youtubelogo.png" alt="Youtube"></ a></li>
 <li>...</li>
 </ul>
 </footer>
 <!--END OF FOOTER -->
 </body>
 </html> Remember, this is only the HTML (the structure) We still need to make the CSS (the design)
  40. 40. Your turn…pick one of the following website and create the html for it http://www.comp.rgu.ac.uk/ http://www.bbc.co.uk/news http://www.bbc.co.uk/sport/ http://www.techradar.com/ http://www.metoffice.gov.uk/ http://mashable.com/
  41. 41. want some feedback?send me a tweet! @mike_crabb Lecturer in Web Development Robert Gordon University Scotland

×