Embed Size (px)
Citation preview
HTMLIntroduction 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
Firefox Web Developer Toolbar
HTML VALIDATOR (based on HTML Tidy)
Web development
• content : html (XHTML, HTML5)
• styling : css
• behavior : JavaScript, Ajax...
Components of a webpageA 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>
Save...
...and open in your browser!
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>
• Practicehttp://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
• Practicehttp://www.w3schools.com/tags/tag_img.asphttp://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
• Practicehttp://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 element example
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 (!)
