SlideShare a Scribd company logo
1 of 41
Download to read offline
webDEV@RGU
creating html pages
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
Template
Deconstruction
this is the page we’ll be
looking at
Header Quick Links
Logo Search Bar
Navigation
Main
3 sections
Header
Form
Navigation
Image
Article Article Article
Header
Image
Text (description)
Footer
Heading
Links
Creating the
html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>RGU Homepage</title>

</head>

<body>



</body>

</html>
<!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>
<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
<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
<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
<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
<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
<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>
<main>
<!-- Section 1 -->

<section>

</section>
<!-- Section 2 -->
<section>

</section>
<!-- Section 3 -->
<section>

</section>

</main>
1. Split the <main> into 3 <section> tags
<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
<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
<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
<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>
<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 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)
<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
<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
<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
<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)
<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
<article>

<h3>Postgraduate Open Evening</h3>

<img src="newsarticle1.png" alt="Postgraduate students talking">

<p>Register to attend...</p>

</article>
<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>
<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
<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
<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
<!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>
<!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)
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/
want some feedback?send me a tweet!
@mike_crabb
Lecturer in Web Development
Robert Gordon University
Scotland

More Related Content

What's hot (20)

Basic html structure
Basic html structureBasic html structure
Basic html structure
 
Introduction to Html
Introduction to HtmlIntroduction to Html
Introduction to Html
 
Html ppt
Html pptHtml ppt
Html ppt
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
CSS Layout Techniques
CSS Layout TechniquesCSS Layout Techniques
CSS Layout Techniques
 
Html
HtmlHtml
Html
 
Web development using html 5
Web development using html 5Web development using html 5
Web development using html 5
 
HTML
HTMLHTML
HTML
 
Html ppt
Html pptHtml ppt
Html ppt
 
Xml
XmlXml
Xml
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Beginners PHP Tutorial
Beginners PHP TutorialBeginners PHP Tutorial
Beginners PHP Tutorial
 
Javascript basics
Javascript basicsJavascript basics
Javascript basics
 
Html
HtmlHtml
Html
 
Learning HTML
Learning HTMLLearning HTML
Learning HTML
 
Web Fundamentals
Web FundamentalsWeb Fundamentals
Web Fundamentals
 
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easilyEye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
 
Lab #2: Introduction to Javascript
Lab #2: Introduction to JavascriptLab #2: Introduction to Javascript
Lab #2: Introduction to Javascript
 

Viewers also liked

CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, LinzCSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, LinzRachel Andrew
 
Introduction to Go programming
Introduction to Go programmingIntroduction to Go programming
Introduction to Go programmingExotel
 
Test Automation - Principles and Practices
Test Automation - Principles and PracticesTest Automation - Principles and Practices
Test Automation - Principles and PracticesAnand Bagmar
 
New Amazing Things about AngularJS 2.0
New Amazing Things about AngularJS 2.0New Amazing Things about AngularJS 2.0
New Amazing Things about AngularJS 2.0Mike Taylor
 
Node.js and The Internet of Things
Node.js and The Internet of ThingsNode.js and The Internet of Things
Node.js and The Internet of ThingsLosant
 
Introduction to Information Architecture
Introduction to Information ArchitectureIntroduction to Information Architecture
Introduction to Information ArchitectureMike Crabb
 
iOS Scroll Performance
iOS Scroll PerformanceiOS Scroll Performance
iOS Scroll PerformanceKyle Sherman
 
Top Insights from SaaStr by Leading Enterprise Software Experts
Top Insights from SaaStr by Leading Enterprise Software ExpertsTop Insights from SaaStr by Leading Enterprise Software Experts
Top Insights from SaaStr by Leading Enterprise Software ExpertsOpenView
 
Launching a Rocketship Off Someone Else's Back
Launching a Rocketship Off Someone Else's BackLaunching a Rocketship Off Someone Else's Back
Launching a Rocketship Off Someone Else's Backjoshelman
 
Data made out of functions
Data made out of functionsData made out of functions
Data made out of functionskenbot
 
Montreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern WebMontreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern WebRachel Andrew
 
The Future of Real-Time in Spark
The Future of Real-Time in SparkThe Future of Real-Time in Spark
The Future of Real-Time in SparkReynold Xin
 
Introduction to Development for the Internet
Introduction to Development for the InternetIntroduction to Development for the Internet
Introduction to Development for the InternetMike Crabb
 
Mobile-First SEO - The Marketers Edition #3XEDigital
Mobile-First SEO - The Marketers Edition #3XEDigitalMobile-First SEO - The Marketers Edition #3XEDigital
Mobile-First SEO - The Marketers Edition #3XEDigitalAleyda Solís
 
What to Upload to SlideShare
What to Upload to SlideShareWhat to Upload to SlideShare
What to Upload to SlideShareSlideShare
 
Dear NSA, let me take care of your slides.
Dear NSA, let me take care of your slides.Dear NSA, let me take care of your slides.
Dear NSA, let me take care of your slides.Emiland
 
What I Carry: 10 Tools for Success
What I Carry: 10 Tools for SuccessWhat I Carry: 10 Tools for Success
What I Carry: 10 Tools for SuccessJonathon Colman
 
IT in Healthcare
IT in HealthcareIT in Healthcare
IT in HealthcareNetApp
 
SXSW 2016 takeaways
SXSW 2016 takeawaysSXSW 2016 takeaways
SXSW 2016 takeawaysHavas
 

Viewers also liked (20)

CSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, LinzCSS Grid Layout for Topconf, Linz
CSS Grid Layout for Topconf, Linz
 
Introduction to Go programming
Introduction to Go programmingIntroduction to Go programming
Introduction to Go programming
 
Test Automation - Principles and Practices
Test Automation - Principles and PracticesTest Automation - Principles and Practices
Test Automation - Principles and Practices
 
New Amazing Things about AngularJS 2.0
New Amazing Things about AngularJS 2.0New Amazing Things about AngularJS 2.0
New Amazing Things about AngularJS 2.0
 
Testing at Spotify
Testing at SpotifyTesting at Spotify
Testing at Spotify
 
Node.js and The Internet of Things
Node.js and The Internet of ThingsNode.js and The Internet of Things
Node.js and The Internet of Things
 
Introduction to Information Architecture
Introduction to Information ArchitectureIntroduction to Information Architecture
Introduction to Information Architecture
 
iOS Scroll Performance
iOS Scroll PerformanceiOS Scroll Performance
iOS Scroll Performance
 
Top Insights from SaaStr by Leading Enterprise Software Experts
Top Insights from SaaStr by Leading Enterprise Software ExpertsTop Insights from SaaStr by Leading Enterprise Software Experts
Top Insights from SaaStr by Leading Enterprise Software Experts
 
Launching a Rocketship Off Someone Else's Back
Launching a Rocketship Off Someone Else's BackLaunching a Rocketship Off Someone Else's Back
Launching a Rocketship Off Someone Else's Back
 
Data made out of functions
Data made out of functionsData made out of functions
Data made out of functions
 
Montreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern WebMontreal Girl Geeks: Building the Modern Web
Montreal Girl Geeks: Building the Modern Web
 
The Future of Real-Time in Spark
The Future of Real-Time in SparkThe Future of Real-Time in Spark
The Future of Real-Time in Spark
 
Introduction to Development for the Internet
Introduction to Development for the InternetIntroduction to Development for the Internet
Introduction to Development for the Internet
 
Mobile-First SEO - The Marketers Edition #3XEDigital
Mobile-First SEO - The Marketers Edition #3XEDigitalMobile-First SEO - The Marketers Edition #3XEDigital
Mobile-First SEO - The Marketers Edition #3XEDigital
 
What to Upload to SlideShare
What to Upload to SlideShareWhat to Upload to SlideShare
What to Upload to SlideShare
 
Dear NSA, let me take care of your slides.
Dear NSA, let me take care of your slides.Dear NSA, let me take care of your slides.
Dear NSA, let me take care of your slides.
 
What I Carry: 10 Tools for Success
What I Carry: 10 Tools for SuccessWhat I Carry: 10 Tools for Success
What I Carry: 10 Tools for Success
 
IT in Healthcare
IT in HealthcareIT in Healthcare
IT in Healthcare
 
SXSW 2016 takeaways
SXSW 2016 takeawaysSXSW 2016 takeaways
SXSW 2016 takeaways
 

Similar to Creating HTML Pages

Ifi7174 lesson1
Ifi7174 lesson1Ifi7174 lesson1
Ifi7174 lesson1Sónia
 
HTML CSS Best Practices
HTML CSS Best PracticesHTML CSS Best Practices
HTML CSS Best Practiceshoctudau
 
Polytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilarePolytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilareOluwadamilare Ibrahim
 
Polytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilarePolytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilareOluwadamilare Ibrahim
 
Fronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-templateFronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-templateInventis Web Architects
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11Emily Lewis
 
Html tags-chart
Html tags-chartHtml tags-chart
Html tags-chartNitra Ntc
 
Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Daniel Downs
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginnersjeroenvdmeer
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Terry Ryan
 
Updated html programs
Updated html programsUpdated html programs
Updated html programsDeepali54
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單偉格 高
 
jQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisjQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisPablo Garrido
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to BootstrapRon Reiter
 
LIS3353 SP12 Week 4
LIS3353 SP12 Week 4LIS3353 SP12 Week 4
LIS3353 SP12 Week 4Amanda Case
 
Hypertext markup language(html)
Hypertext markup language(html)Hypertext markup language(html)
Hypertext markup language(html)Jayson Cortez
 
Caracteristicas Basicas De Htlm
Caracteristicas Basicas De HtlmCaracteristicas Basicas De Htlm
Caracteristicas Basicas De HtlmMaria S Rivera
 

Similar to Creating HTML Pages (20)

Ifi7174 lesson1
Ifi7174 lesson1Ifi7174 lesson1
Ifi7174 lesson1
 
HTML CSS Best Practices
HTML CSS Best PracticesHTML CSS Best Practices
HTML CSS Best Practices
 
Polytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilarePolytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilare
 
Polytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilarePolytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilare
 
Fronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-templateFronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-template
 
Take Your Markup to 11
Take Your Markup to 11Take Your Markup to 11
Take Your Markup to 11
 
Html tags-chart
Html tags-chartHtml tags-chart
Html tags-chart
 
HTML & CSS 2017
HTML & CSS 2017HTML & CSS 2017
HTML & CSS 2017
 
Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.
 
HTML presentation for beginners
HTML presentation for beginnersHTML presentation for beginners
HTML presentation for beginners
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Updated html programs
Updated html programsUpdated html programs
Updated html programs
 
TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
jQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveisjQuery Mobile - Desenvolvimento para dispositivos móveis
jQuery Mobile - Desenvolvimento para dispositivos móveis
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
LIS3353 SP12 Week 4
LIS3353 SP12 Week 4LIS3353 SP12 Week 4
LIS3353 SP12 Week 4
 
HTML tags
HTML tagsHTML tags
HTML tags
 
html-tags-chart.pdf
html-tags-chart.pdfhtml-tags-chart.pdf
html-tags-chart.pdf
 
Hypertext markup language(html)
Hypertext markup language(html)Hypertext markup language(html)
Hypertext markup language(html)
 
Caracteristicas Basicas De Htlm
Caracteristicas Basicas De HtlmCaracteristicas Basicas De Htlm
Caracteristicas Basicas De Htlm
 

More from Mike Crabb

Hard to Reach Users in Easy to Reach Places
Hard to Reach Users in Easy to Reach PlacesHard to Reach Users in Easy to Reach Places
Hard to Reach Users in Easy to Reach PlacesMike Crabb
 
Accessible and Assistive Interfaces
Accessible and Assistive InterfacesAccessible and Assistive Interfaces
Accessible and Assistive InterfacesMike Crabb
 
Accessible Everyone
Accessible EveryoneAccessible Everyone
Accessible EveryoneMike Crabb
 
The Peer Review Process
The Peer Review ProcessThe Peer Review Process
The Peer Review ProcessMike Crabb
 
Managing Quality In Qualitative Research
Managing Quality In Qualitative ResearchManaging Quality In Qualitative Research
Managing Quality In Qualitative ResearchMike Crabb
 
Analysing Qualitative Data
Analysing Qualitative DataAnalysing Qualitative Data
Analysing Qualitative DataMike Crabb
 
Conversation Discourse and Document Analysis
Conversation Discourse and Document AnalysisConversation Discourse and Document Analysis
Conversation Discourse and Document AnalysisMike Crabb
 
Ethnographic and Observational Research
Ethnographic and Observational ResearchEthnographic and Observational Research
Ethnographic and Observational ResearchMike Crabb
 
Doing Focus Groups
Doing Focus GroupsDoing Focus Groups
Doing Focus GroupsMike Crabb
 
Doing Interviews
Doing InterviewsDoing Interviews
Doing InterviewsMike Crabb
 
Designing Qualitative Research
Designing Qualitative ResearchDesigning Qualitative Research
Designing Qualitative ResearchMike Crabb
 
Introduction to Accessible Design
Introduction to Accessible DesignIntroduction to Accessible Design
Introduction to Accessible DesignMike Crabb
 
Accessible Everyone
Accessible EveryoneAccessible Everyone
Accessible EveryoneMike Crabb
 
Texture and Glyph Design
Texture and Glyph DesignTexture and Glyph Design
Texture and Glyph DesignMike Crabb
 
Pattern Perception and Map Design
Pattern Perception and Map DesignPattern Perception and Map Design
Pattern Perception and Map DesignMike Crabb
 
Dealing with Enterprise Level Data
Dealing with Enterprise Level DataDealing with Enterprise Level Data
Dealing with Enterprise Level DataMike Crabb
 
Using Cloud in an Enterprise Environment
Using Cloud in an Enterprise EnvironmentUsing Cloud in an Enterprise Environment
Using Cloud in an Enterprise EnvironmentMike Crabb
 
Teaching Cloud to the Programmers of Tomorrow
Teaching Cloud to the Programmers of TomorrowTeaching Cloud to the Programmers of Tomorrow
Teaching Cloud to the Programmers of TomorrowMike Crabb
 
Sql Injection and XSS
Sql Injection and XSSSql Injection and XSS
Sql Injection and XSSMike Crabb
 
Forms and Databases in PHP
Forms and Databases in PHPForms and Databases in PHP
Forms and Databases in PHPMike Crabb
 

More from Mike Crabb (20)

Hard to Reach Users in Easy to Reach Places
Hard to Reach Users in Easy to Reach PlacesHard to Reach Users in Easy to Reach Places
Hard to Reach Users in Easy to Reach Places
 
Accessible and Assistive Interfaces
Accessible and Assistive InterfacesAccessible and Assistive Interfaces
Accessible and Assistive Interfaces
 
Accessible Everyone
Accessible EveryoneAccessible Everyone
Accessible Everyone
 
The Peer Review Process
The Peer Review ProcessThe Peer Review Process
The Peer Review Process
 
Managing Quality In Qualitative Research
Managing Quality In Qualitative ResearchManaging Quality In Qualitative Research
Managing Quality In Qualitative Research
 
Analysing Qualitative Data
Analysing Qualitative DataAnalysing Qualitative Data
Analysing Qualitative Data
 
Conversation Discourse and Document Analysis
Conversation Discourse and Document AnalysisConversation Discourse and Document Analysis
Conversation Discourse and Document Analysis
 
Ethnographic and Observational Research
Ethnographic and Observational ResearchEthnographic and Observational Research
Ethnographic and Observational Research
 
Doing Focus Groups
Doing Focus GroupsDoing Focus Groups
Doing Focus Groups
 
Doing Interviews
Doing InterviewsDoing Interviews
Doing Interviews
 
Designing Qualitative Research
Designing Qualitative ResearchDesigning Qualitative Research
Designing Qualitative Research
 
Introduction to Accessible Design
Introduction to Accessible DesignIntroduction to Accessible Design
Introduction to Accessible Design
 
Accessible Everyone
Accessible EveryoneAccessible Everyone
Accessible Everyone
 
Texture and Glyph Design
Texture and Glyph DesignTexture and Glyph Design
Texture and Glyph Design
 
Pattern Perception and Map Design
Pattern Perception and Map DesignPattern Perception and Map Design
Pattern Perception and Map Design
 
Dealing with Enterprise Level Data
Dealing with Enterprise Level DataDealing with Enterprise Level Data
Dealing with Enterprise Level Data
 
Using Cloud in an Enterprise Environment
Using Cloud in an Enterprise EnvironmentUsing Cloud in an Enterprise Environment
Using Cloud in an Enterprise Environment
 
Teaching Cloud to the Programmers of Tomorrow
Teaching Cloud to the Programmers of TomorrowTeaching Cloud to the Programmers of Tomorrow
Teaching Cloud to the Programmers of Tomorrow
 
Sql Injection and XSS
Sql Injection and XSSSql Injection and XSS
Sql Injection and XSS
 
Forms and Databases in PHP
Forms and Databases in PHPForms and Databases in PHP
Forms and Databases in PHP
 

Recently uploaded

Machine Learning Software Engineering Patterns and Their Engineering
Machine Learning Software Engineering Patterns and Their EngineeringMachine Learning Software Engineering Patterns and Their Engineering
Machine Learning Software Engineering Patterns and Their EngineeringHironori Washizaki
 
Zer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfZer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfmaor17
 
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsSensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsChristian Birchler
 
Best Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITBest Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITmanoharjgpsolutions
 
Patterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencePatterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencessuser9e7c64
 
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxUI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxAndreas Kunz
 
Osi security architecture in network.pptx
Osi security architecture in network.pptxOsi security architecture in network.pptx
Osi security architecture in network.pptxVinzoCenzo
 
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...OnePlan Solutions
 
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics
 
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingOpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingShane Coughlan
 
Powering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data StreamsPowering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data StreamsSafe Software
 
Large Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLarge Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLionel Briand
 
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdfAndrey Devyatkin
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldRoberto Pérez Alcolea
 
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonLeveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonApplitools
 
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesAmazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesKrzysztofKkol1
 
Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Rob Geurden
 
Salesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZSalesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZABSYZ Inc
 
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...Bert Jan Schrijver
 
2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shardsChristopher Curtin
 

Recently uploaded (20)

Machine Learning Software Engineering Patterns and Their Engineering
Machine Learning Software Engineering Patterns and Their EngineeringMachine Learning Software Engineering Patterns and Their Engineering
Machine Learning Software Engineering Patterns and Their Engineering
 
Zer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdfZer0con 2024 final share short version.pdf
Zer0con 2024 final share short version.pdf
 
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsSensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
 
Best Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh ITBest Angular 17 Classroom & Online training - Naresh IT
Best Angular 17 Classroom & Online training - Naresh IT
 
Patterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencePatterns for automating API delivery. API conference
Patterns for automating API delivery. API conference
 
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxUI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
 
Osi security architecture in network.pptx
Osi security architecture in network.pptxOsi security architecture in network.pptx
Osi security architecture in network.pptx
 
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
Tech Tuesday Slides - Introduction to Project Management with OnePlan's Work ...
 
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News UpdateVictoriaMetrics Q1 Meet Up '24 - Community & News Update
VictoriaMetrics Q1 Meet Up '24 - Community & News Update
 
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingOpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
 
Powering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data StreamsPowering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data Streams
 
Large Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and RepairLarge Language Models for Test Case Evolution and Repair
Large Language Models for Test Case Evolution and Repair
 
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
2024-04-09 - From Complexity to Clarity - AWS Summit AMS.pdf
 
Keeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository worldKeeping your build tool updated in a multi repository world
Keeping your build tool updated in a multi repository world
 
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonLeveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
 
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilitiesAmazon Bedrock in Action - presentation of the Bedrock's capabilities
Amazon Bedrock in Action - presentation of the Bedrock's capabilities
 
Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...
 
Salesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZSalesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZ
 
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
JavaLand 2024 - Going serverless with Quarkus GraalVM native images and AWS L...
 
2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards
 

Creating HTML Pages

  • 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
  • 4. this is the page we’ll be looking at
  • 5. Header Quick Links Logo Search Bar Navigation
  • 13. <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>RGU Homepage</title>
 </head>
 <body>
 
 </body>
 </html>
  • 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. <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. <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. <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. <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. <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. <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. <main> <!-- Section 1 -->
 <section>
 </section> <!-- Section 2 --> <section>
 </section> <!-- Section 3 --> <section>
 </section>
 </main> 1. Split the <main> into 3 <section> tags
  • 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. <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. <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. <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. <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. <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. <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. <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. <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. <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. <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. <article>
 <h3>Postgraduate Open Evening</h3>
 <img src="newsarticle1.png" alt="Postgraduate students talking">
 <p>Register to attend...</p>
 </article>
  • 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. <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. <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. <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. <!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. <!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. 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. want some feedback?send me a tweet! @mike_crabb Lecturer in Web Development Robert Gordon University Scotland