HTML & teh internets
Introduction Who am I? Who are you? What do you know?
What’s a text editor? (not a person!) What’s a server? What do you know? What is HTML? Name Summary What’s a text editor? (not a person!) What’s a server? Name as many browsers as you know? Which one do you prefer? What do you think this code is doing? <p>Dolly is a <b>weird</b> sheep!</p> How do you call these questions?
Contents Introduction Internet & Basic HTML DIY Hints & Tips
At the end of this day you’ll be able to Goals At the end of this day you’ll be able to Create an HTML file View both code and result Use a text editor Write simple HTML Understand what the above actually means You’ll also understand How internet and HTML generally works What we’re going to do this course
Servers & Clients: What’s in a name? Software & Hardware Opens directories to remote users (clients) Sends data on request Client Software & Person Downloads data and presents it to the user Requests data Think of the postal service, but the other way around.
HyperText Markup Language What is HTML? HyperText Markup Language HyperText Markup Language? Plain text Right-click on desktop New Text Document Extension: .html Tags
Tags <HTML> </HTML> <HEAD> <TITLE> First Try </TITLE> </HEAD> <BODY> <P> Does this work? </P> </BODY> </HTML>
HyperText Markup Language Plain text Extension: .html Tags Structured What is HTML? HyperText Markup Language Plain text Extension: .html Tags Structured Containers Nesting Indentation
Structured <HTML> </HTML> <HEAD> <TITLE> First Try </TITLE> </HEAD> <BODY> <P> Does this work? </P> </BODY> </HTML>
What is HTML? HyperText Markup Language Plain text Extension: .html Tags Structured Rendered by browser software
HyperText Markup Language Plain text Extension: .html Tags Structured What is HTML? HyperText Markup Language Plain text Extension: .html Tags Structured Rendered by browser software You don’t need a server to use HTML! Create and test on your own pc You can’t break anything
Let’s see what happens if we open them. Demonstration 2 files with this text “Hello! I am fat text.” One is called text_1.txt and one text_1.html “Hello! I am <b>fat text</b>.” One is called text_2.txt and one text_2.html Let’s see what happens if we open them.
Just try it <B>, <I> <P>, <H2> <BR>, <HR> <UL>, <OL> <LI> <UL> <LI>FIAT</LI> <LI>BMW</LI> <LI>FORD</LI> </UL> Bold, Italic Paragraph, Heading 2 Break, Horizontal Rule (Un-) Ordered List List Item Structured
The course website can be found at Go to day 1, last paragraph Exercise 1 The course website can be found at www.indeles.nl Go to day 1, last paragraph Try to recreate the first half of the page (up to 'Links') without looking at the source code. But how do you do that?
What to do? Get your USB stick Go to Website Editors/Crimson Editor/ Open cedt.exe Save the empty start file as mypage.html I’d do that on your usb stick or network Open FireFox or Internet Explorer Drag mypage.html in the browser Open the example page in another screen Edit in the editor, save, refresh the browser (F5) to see the result.
Exercise 1!
Just try it <B>, <I> <P>, <H2> <BR>, <HR> <UL>, <OL> <LI> <UL> <LI>FIAT</LI> <LI>BMW</LI> <LI>FORD</LI> </UL> Bold, Italic Paragraph, Heading 2 Break, Horizontal Rule (Un-) Ordered List List Item Structured
At the end of this day you’ll be able to Goals At the end of this day you’ll be able to Create an HTML file View both code and result Use a text editor Write simple HTML Understand what the above actually means You’ll also understand How internet and HTML generally works What we’re going to do this course
We will focus on stuff that happens at the side of the client This course We will focus on stuff that happens at the side of the client Everything works on your own PC Very little ‘real’ programming Good for small sites Keywords HTML CSS Javascript Images Multimedia
We will focus on stuff that happens at the side of the server Next course We will focus on stuff that happens at the side of the server You’ll need a server (which can run on your own PC) Lots of ‘real’ programming Good for big sites Keywords PHP MySQL Forms
Make a decent layout for a bit of text Read HTML reference up to p16 Homework Make a decent layout for a bit of text Read HTML reference up to p16 Finish example HTML if you didn’t do so The main product of this course is an educational website. Think up a topic for your website Does the topic fit the medium? Do you really want to share it? Is it related to your studies? Does it have any educational value?
Done!