Beginning HTML. The Nuts and Bolts of building Web pages.

Size: px

Start display at page:

Download "Beginning HTML. The Nuts and Bolts of building Web pages."

Laurence Shon Williams
5 years ago
Views:

1 Beginning HTML The Nuts and Bolts of building Web pages.

2 Overview Today we will cover: 1. what is HTML and what is it not? Building a simple webpage Getting that online.

3 What is HTML? The language of the Internet. It describes the contents of your web site. It tells the browser what things are; not what they look like.

4 Example. Imagine a newspaper. How would you subdivide a newspaper?

5 Here s how I d do it.

6 Translating this to the web Html gives us the means of describing what different parts of a website are. It also can describe what something looks like but you should try to avoid this

7 Describing what something looks like What something looks like, or where it s positioned on the webpage is handled by: Cascading Style sheets (CSS) We ll cover more of CSS later in the course.

8 So what about the fancy dynamic stuff? That s handled by things like JavaScript. This handles things like parts of pages refreshing automatically, checking data users enter is correct etc.

9 summary So we can say then: HTML tells the browser what something is; CSS tells the browser how to display it; JavaScript allows you to define dynamic aspects of a webpage.

10 What HTML is not. Html is not a programming language. You can t do loops. You can t do if statements. It s just there to describe the content of your web pages.

11 So what does it look like? <!DOCTYPE html> <html lang="en"> <head> <title>our first rather boring page</title> </head> <body> <p>welcome to the first CA106 web page. I hope you enjoy this module.</p> </body> </html>

12 Breaking it down HTML is made up of tags and attributes. A tag essentially describes what the purpose is. The attributes are more information you can add to provide more information to the browser. You ll see plenty of this as we go along.

13 The Doctype The first tag is: <!DOCTYPE HTML> This tells the browser what type of document it is dealing with. You should always have this line in every HTML document. Otherwise, the browser doesn t know how to interpret the document correctly.

14 Next is the HTML tag. The HTML tag.

15 The Remaining Parts Each page has two parts: a head and a body. <html lang="en"> The Here s your first tag with an attribute. It tells the browser that this is the beginning of the document. And: It also says that the language is English.

16 It s that simple. Html doesn t get any more difficult than that. You have to get used to looking at web pages in terms of the tags that describe them, and the extra attributes that provide some more information.

17 We can also write: This is also perfectly legal: <html> Here we just show the browser where the document starts, but don t specify the language of the document.

18 Jumping forward Look at the very last line of the file. It says: </html> This is the closing tag. When you open a tag, you need to close it. Note: there are a few different ways of closing tags; but more of this in a future lecture.

19 Inside the HTML tag. So inside the outer HTML tag we have <head> </head> <body> </body> So we say tags are nested. Again, there are rules for what tags can go inside other tags. We ll come back to that too.

20 The Head of your document Inside the head of the document you find: <title> </title> This is what appears in the title of your browser. Other things go in here, but this will do for now.

21 The body The next thing is: <body> </body> This is the meat of the page. Here you place your text, images, videos

22 And inside the body? So in our page, the last tag is: <p> </p> This denotes a paragraph of text. Note that it is nested inside the body tag. Note also that your text is actually contained inside the boundaries created by the opening and closing of the tag.

23 The word again is? Nesting, nesting, nesting.

24 Why are we doing this? At this point it s worth asking some questions: How many of you have designed web pages before? What tools did you use? Many of you may need to unlearn bad habits

25 Why are we doing this? We are doing everything based on scientific, structured methods. We are using techniques based on web standards. This means, we follow rules of how to write HTML and CSS.

26 Again though, why? When you write web pages this way, you re helping the browser to display the contents correctly. By describing your text as a paragraph, or a heading, (etc.) there s no ambiguity as to what it means.

27 Same page, Different browsers There are lots of different devices running many different browsers. So do you want to write a version of your site for each one? Even if you did, you couldn t. However most modern browsers understand properly written HTML. By using this approach, you have more chance of your site working properly on more devices than if you don t.

28 What tools do I need? That depends on how much web development you do. For now: you need a text editor, an internet browser Sorry, nothing more fancy than that I m afraid.

29 What editor? Something as simple as Notepad on windows will do fine. However, on windows I recommend: 1. notepad++ 2. Editplus The reason is that these have ways to colour-code HTML or CSS, and have other handy features.

30 And what browser? Here, I suggest using Chrome or Firefox. You ll need to test on both. Mac users: Include Safari as well.

31 Steps involved in writing your webpage. 1. Create a new text document on your machine and input the HTML. 2. Save it with a.html extension. This means the browser can open it. 3. Now, open your page with a browser. 4. Fix any errors. 5. Publish to the web so others can view it.

32 What does to publish a page mean? When your page is created on your own machine (called a local machine) nobody but you can access it. It s just another file on the hard disk. Publish means you upload to a server and make it accessible by other people. In other words you copy the file from your machine to a server.

33 How do I copy? You use a program called an FTP or SFTP client. This simply allows you to connect from your local machine to the server where you want to store your file; Then you find the folder (also called directory) where you want to store your page; Then you just copy the file across.

34 Where should I store the page? On our servers, you will store the page in your public_html directory. Your home page should always be called index.html

35 Lab today The lab exercise will be ed to you. For today, I d like everyone to use windows. You re going to create a very very simple homepage, and get it online. We ll build from there.

36 summary Html is the language of the internet. It describes the contents of a page so your browser can display correctly. It consists of tags and attributes.

CMT111-01/M1: HTML & Dreamweaver. Creating an HTML Document

CMT111-01/M1: HTML & Dreamweaver Bunker Hill Community College Spring 2011 Instructor: Lawrence G. Piper Creating an HTML Document 24 January 2011 Goals for Today Be sure we have essential tools text editor