Lecture 2 - HTML Basics

HTML Introduction to webdesign: the basic web page with practice suggestions Online Publishing

Tim Berners-Lee's Browser Editor WorldWideWeb as developed in 1991-92 This was a true browser editor for the first version of HTML and ran on a NeXt workstation. Implemented in Objective-C, it, made it easy to create, view and edit web documents.

Browsers • Browsers: Edge, IE, Firefox, Google Chrome • Browser stats: http://www.w3schools.com/browsers/browsers_stats.asp • For webdesign: Firefox with web development extensions • Firebug • Web Developer

HTML VALIDATOR (based on HTMLTidy)

Web development • content : html (XHTML, HTML5) • styling : css • behavior : JavaScript, Ajax...

Components of a webpage A webpage mostly consists of: • html • css • images And can also contain: • client-side script code • embedded media, e.g. a flash movie

Writing for the Web • Conversion from Word Processor • Directly with an HTML-editor • Through a Content Management System of CMS • Blog • Wiki • Through aggregation (RSS-feeds) • Database-driven through scripts / mashups

W3C consortium • Home Page: http://www.w3.org • On Web Design: http://www.w3.org/standards/webdesign/ • Try it Yourself: http://www.w3schools.com/HTML/html_intro.asp

• Use the web developer toolbar in Firefox to explore some sample webpages • Examples webpages to study: • W3C: http://www.w3.org/ • CSSzengarden: http://www.csszengarden.com/ • CSShelppile: http://www.artypapers.com/csshelppile/ Practice suggestion

Embedded Tags • A tag is a piece of coding to describe simple markup of a webpage • <tag> textbetweentags</tag> For example: marking the beginning and end of a paragraph : <p> This is a paragraph. The End. </p> • Most html-tags consist of an opening and closing tag. • In XHTML, every tag must have a closing tag. XHTML is slightly more rigid than standard HTML • Everything starting with an opening tag and ending with a closing tag including what is in between is called an HTML element

Structure • The opening tag can contain attributes • XHTML rules: • use lowercase letters • values between double quotes <tagname attribute=“value”> </tagname> For example, to align a paragraph in the middle of the page: <p align=“center”> Paragraph </p>

Necessary tags • Each HTML/XHTML document has: • <html> start of an html-encoded webpage • <head> contains more info, not shown on the webpage! • <title> labels the page. (on top of the browser, and at the bottom) • <body> the actual webpage contents

Download Notepad ++ http://notepad-plus-plus.org/download/ (click Notepad++ Installer) Open Notepad Make a new File (File > New) Set the 'Language' to HTML (Language > H > HTML) Save your file on your computer as “index.html”. Other option: Sublime https://www.sublimetext.com/ Practice suggestion

Reproduce this: <html> <head> <title>This is the title of my document</title> </head> <body> <h1>Hello!</h1> <p>a paragraph</p> </body> </html>

Structuring a document • Text: • paragraph <p> </p> • division <div> </div> • break <br> (in xhtml: <br />) • Headings: • heading 1 -> 6 e.g. <h1> </h1> • A horizontal rule: • horizontal rule <hr> (in xhtml: <hr />) • pre-formatted <pre> </pre>

• Copy the text below Practice suggestion Online Publishing General Description In the course of Online Publishing, web 2.0 is a crucial notion. Topics include social media, e-books, Google and data organisation, knowledge 2.0, etc. Next to a series of theoretical discussions on these themes, a practical approach is encouraged by teaching to use website building tools such as Wordpress to make an interesting, correctly functioning website. The two graded assignments and mandatory reading task reflect this approach. Assignments Overview Firstly, there is a website which the students make in groups of approximately 4 people. The theme can be anything, as long as it relates to the contents of the course. Secondly, all students must write a paper of academic standards individually. It is sensible to relate the topic of the paper to the topic of the website, though this is negotiable. Thirdly, there is a mandatory reading assignment to complete before November, 17. The Reading Assignment The following articles should be read by all students: Vannevar Bush, As we may think Manuel Castells, The Net and the Self: Working Notes for a critical theory of the information society Lev Manovich, The Practice of Everyday (Media) Life Henry Jenkins The Cultural Logic of Media Convergence

• Paste it in your notepad html-file where it says • <p>a paragraph</p> • Mark titles and subtitles <h1> </h1> <h2> </h2> • Mark paragraphs and breaks • paragraph <p> </p> • break <br> (in xhtml: <br />) All tutorials: http://www.w3schools.com/ Practice suggestion

Hyperlinks • Anchor tag • <a href="http://www.culturalstudies.be">Cultural Studies</a> • Anchor tag attributes • href=“url” • target=“_blank” (new window) • name=“name” • Link to location in page • named anchor <a name=“contactinfo”></a> • anchor <a href=“#contactinfo”>Jump to contact info</a> • Practice http://www.w3schools.com/html/html_links.asp

Inserting images • Image tag • <img src=“train.jpg"> (Can also be URL!) • image tag attributes • src = image URL src=“train.jpg” • alt = alternate text alt=“train” • align = alignment to text align="middle" • width = in pixels width=“50" • height = in pixels height=“100" • JPEG, GIF en PNG • Practice http://www.w3schools.com/tags/tag_img.asp http://www.w3schools.com/html/tryit.asp?filename=tryhtml_image_align

Lists • Ordered list <ol> </ol> : 1, 2, 3, 4 • Unordered list <ul> </ul> : bullets • List item <li> </li> <ul> <li>item 1</li> <li>item 2</li> </ul> Practice • http://www.w3schools.com/tags/tag_li.asp

Nested list <ul> <li>milk </li> <ol> <li>skimmed milk</li> <li>soy milk</li> </ol> <li>flour</li> <li>sugar </li> </ul> • milk 1. skimmed milk 2. soy milk • flour • sugar Code Result

Table • To present lots of numbers and data structurally • To create the layout grid • A table consists of a string of tags: • table, table body, table header, table row, table data • Practice http://www.w3schools.com/tags/tag_table.asp

Table <table border = "1"> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </table> Cell A Cell B Code Result

Fonts • ! <font> tags are 'out' Fonts and other style elements = in the CSS stylesheet • font tag attributes: • face ="Times New Roman" • size ="12" • color="#ff0000" • <b> for bold </b> • <i> italics </i> • <u> underlined </u>

Blocks • To define page structure • Dividing a webpage in blocks • Tag: <div> … </div> • Example: • <div style="color:#0000FF"> • <h3>This is a heading in a div element</h3> • <p>This is some text in a div element.</p> • </div> • List of tags • http://www.w3schools.com/tags/

<!DOCTYPE html> <html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="background- color:#FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background- color:#EEEEEE;height:200px;width:400px;float:left;"> Content goes here</div> </div> </body> </html>

CSS • Cascading Stylesheets • To apply layout to a HTML page, in a way that clearly separates layout from content • Selectors: indicate to what you want to apply formatting • Cascading: Styles are inherited • 3 ways to implement: • Inline styles • In the HTML Header • In a separate CSS file

CSS Selectors • Any HTML Element • body • h1 • p • a • li • … • id selector: #myparagraph1 #mainimage • class selector: .citation .french .highlight

CSS Box Model • The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

Example CSS Box Model • div.ex • { • width:220px; • padding:10px; • border:5px solid gray; • margin:0px; • }

CSS Examples • Inline styles • <p style="color:blue;margin-left:20px;">This is a paragraph.</p> • In Header Element • <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>

CSS Examples • External Stylesheet File (.css) • Link in HTML: • <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> • Stylesheet contents: • body {background-color:yellow;} • p {color:blue;} • a {text-decoration:none;} • a:link {color:#FF0000;} /* unvisited link */ • a:visited {color:#00FF00;} /* visited link */

HTML color codes • http://www.w3schools.com/colors/colors_picker.asp • http://htmlcolorcodes.com/color-picker/

Forms • Forms are an easy way to implement interactivity on a website • You need 2 pages (you can combine it in one): • the actual HTML page with Form elements • A server-side or client-side script that will parse the form

Form Example Code <form id="form1" name="form1" method="post" action="processthisform.php"> <p> <label for="Name">Name</label> <input type="text" name="Name" id="Name" /> </p> <p>Study programme: <select name="Programme" id="Programme"> <option value="1">Master of Arts in Cultural Studies</option> <option value="2">Master of Arts in History</option> <option value="3">Master of Science in Information Management</option> </select> </p>

Form Example Code <p>Gender: </p> <p> <label> <input type="radio" name="Gender" value="M" id="Gender_0" /> Male</label> <br /> <label> <input type="radio" name="Gender" value="F" id="Gender_1" /> Female</label> <br /> </p> <p>I wil attend on: </p> <p> <label> <input type="checkbox" name="Attend" value="fri" id="Attend_0" /> Friday</label> <br /> <label> <input type="checkbox" name="Attend" value="sat" id="Attend_1" /> Saturday</label> </p>

Form Example Code <p>Comments:</p> <p><textarea name="Comments" id="Comments" cols="60" rows="5"></textarea> </p> <p> <input type="submit" name="Submit" id="Submit" value="Submit" /> <br /> </p> </form>

Form + script • www.tizag.com/phpT/examples/formexample.php • www.tizag.com/phpT/examples/formvar.php • www.tizag.com/phpT/examples/formfinale.php • Learn how to code: www.codeacademy.com

Publishing yourself online... .... the fastest (cheapest, easiest) way : a blog tool • http://culturalstudiesleuven.net/ • http://espacephotography.com/ • http://fredtruyen.wordpress.com/ • http://carolinestockman.edublogs.org • http://cultuurgeschiedenis.be/ Good tool (with themes and plugins!) + a little design skill + your imagination = Fantastic Website

Wordpress • blog service provider • growing use of website building. • free to use • lots of options (themes, plugins) • allows creativity From blog tool to publishing platform

Banner Links to other pages Title Title of a post Text of a post Youtube video embedded within a post description search function recent posts other social media (!)

Lecture 2 - HTML Basics

More Related Content

What's hot

Viewers also liked

Similar to Lecture 2 - HTML Basics

Recently uploaded

Lecture 2 - HTML Basics

Editor's Notes