Lesson 1 HTML Basics. The Creative Computer Lab. creativecomputerlab.com

Size: px

Start display at page:

Download "Lesson 1 HTML Basics. The Creative Computer Lab. creativecomputerlab.com"

Blake Richards
6 years ago
Views:

1 Lesson 1 HTML Basics The Creative Computer Lab creativecomputerlab.com

2 What we are going to do today Become familiar with web development tools Build our own web page from scratch! Learn where to find online help on web development Learn about the web development work flow Create our own custom multi page web site

3 Required Tools Any text editor. It is recommended to download and install Notepad++ from : Google Chrome or Firefox Browser for viewing work in progress. Online HTML editors: You can experiment with code and get instant results before deciding to add the code to your web page. html_basic

4 Web Development Resources The web is full of tutorials on web design. Here are just a few: W3Schools: HTML Dog: Google: Type in a phrase which describes what you d like to know. Example: How to add an image to a web page This is the first link in the search results:

5 What is HTML? HTML stands for HyperText Markup Language. The HTML language is made up of symbols called tags which give instructions to the browser on how to render content on a web page. HTML is an accepted standard set of rules of which all browsers must follow to assure consistent behaviour. However, different browsers have minor variations on the standard which can lead to inconsistent behaviour in some cases. Therefore, all HTML code which is being developed must be tested in as many different browsers as possible. i.e.: Google Chrome, Firefox, Internet Explorer, etc.

6 Create a Working Folder Create a folder named HTML (or whatever you d like) on your desktop. Right click on the desktop and choose new->folder : You should be able to navigate to your folder easily through the file explorer:

7 Hello World! To create our first web page: Open a new file to edit and type: <!DOCTYPE html> <html> <body> Hello World! </body> </html> Note: you can copy the whole block above and paste it into your file.

8 Hello World! Save the file with an.html extension. For example: helloworld.html : The.html extension tells Notepad++ that this is an HTML file. The syntax coloring and block structure will be recognized: We ll describe syntax coloring in detail later on.

9 Launch Your Page From the File System: 2. Open your web page in the browser: Since it s an html document, you can double click on it and it will display in the browser:

10 View Your Page: The browser will open and display your page: Note that the URL in the address bar indicates the file on your computer which is being displayed.

Your First Web Page Explained The document header tells the browser which version of HTML to use. This header means to use HTML 5. The html element is enclosed in opening and closing html tags.

11 Your First Web Page Explained The document header tells the browser which version of HTML to use. This header means to use HTML 5. The html element is enclosed in opening and closing html tags. This specifies that the content of the document is HTML. The content of the HTML page which is displayed to the user is placed inside the body element. The body element is enclosed in opening and closing body tags. This is where the content to be displayed in the browser is placed. The web page is made up of content, tags and elements. We will define these shortly.

Refresh the page in the browser: Note: the next sentence did not

12 Modify and View Your Web Page: Add another sentence to your Hello World! page: Save the file. Refresh the page in the browser: Note: the next sentence did not appear on a new line. That s because we haven t specified the new line break. We ll learn about that next

13 Why is Everything on the Same Line? HTML is a markup language, therefore, we need to specify when to add a new line. This is done with the tag: The tag is one of the few HTML tags that does not need a closing tag. br stands for line break.

14 Web Page Development Work Flow: The most efficient way to develop web pages is to work on them on your computer and to check your work by running them in the browser. Here s an outline of the workflow: 1. Create a.html file and save it. 2. Launch the.html file in the browser to view it. 3. Make a modification to the.html file and save it. 4. Reload the page in the browser to see the modification. Once we have the page up in the browser, we simply reload it every time we make a modification to the.html file (steps 3 and 4). Remember to save the file before reloading!

15 Jargon: Content, Tags, and Elements, Content is what is being displayed on the web page. Content can be words, pictures, sounds, etc. In our example, the sentence Hello World! is the content. Tags are special reserved words which tell the browser how to render the content. For example <body> and <html> are tags. Elements are HTML objects* which have been created by opening and closing tags. For example <body> </body> is an element created by a matched set of opening and closing tags. Read more about tags and elements here: * We ll explain more about objects later when we learn about JavaScript.

16 HTML Element Syntax - Opening and Closing Tags We have already seen an example of syntax in action when creating the body element. Most elements are defined by an opening and closing tag. Example: The body element opening tag: <body> The body element closing tag: </body> The forward slash / symbol designates a closing tag. The syntax rule is that the opening tags must have a corresponding closing tag. This way the browser can determine when the body element begins and when it ends. Opening and closing tags are required by the browser in order to operate in a predictable manner. Most (not all) HTML tags must be used as opening and closing pairs.

17 HTML Syntax What is syntax in a computer programming language? Syntax is the set of rules governing the composition of text and symbols to create a set of instructions which a machine can follow. Syntax must be exact and unambiguous because unlike humans, machines have no reasoning ability. Machine Limitation Example: Try to figure out what the following sentence is saying: Y0u c&n und3r2t&nd th1s bu7 a c0mpu73r c&nn07. Do you think a machine can figure this out?

18 Start With Good Coding Habits As your web page grows in size, it will become more complex and harder to read. Indented paragraph blocks can be used to clearly distinguish HTML elements and minimize confusion. Note how the Hello World! content is indented to be easily seen that is inside the body element. Also note how the body element is contained within the html element: vs.

19 Headings Headings are defined by the <h1> through <h6> tags. Turn your sentences into headings like so: Remember to close your heading tags as shown above. Notice the spacing between the HTML and body elements. Also notice how the <body> element is indented because it is inside the HTML element.

Heading Example Copy and paste the following code in your document inside the <body> tags: <h1>this is heading 1</h1> <h2>this is heading 2</h2> <h3>this is heading 3</h3> <h4>this is

20 Heading Example Copy and paste the following code in your document inside the <body> tags: <h1>this is heading 1</h1> <h2>this is heading 2</h2> <h3>this is heading 3</h3> <h4>this is heading 4</h4> <h5>this is heading 5</h5> <h6>this is heading 6</h6> Save the file and refresh the browser: Read more about headings here: l_headings.asp

21 HTML Paragraphs The <p> tag defines paragraph blocks. Create two paragraphs in your document and see the result: Read more about paragraphs here: html_paragraphs.asp

22 HTML Paragraphs (continued) The code from the previous page looks like this in the browser:

23 Add A Link to Another Page A link element is created using the <a> tag: The a stands for anchor. Add a link to another page: Copy and paste the following code into your.html file: <a href=" the Web </a> Read more about links here:

24 Create Our First Web Page Let s create a page about some of your favorite things. We ll start with a page header plus some sub-headings and a paragraph. Copy and paste the following code into a new file and name it favorites.html : <!DOCTYPE html> <html> <body> <h1>my Favorite Things</h1> <h2> Music</h2> <h3> Spice Girls </h3> <p> The Spice Girls are my favorite band. </p> </html> </body>

25 The Code When you save the file as favorites.html the.html file extension tells the system that this is html code and the text coloring becomes active The HTML code should look like this:

26 Save the File and Load the Page The page should look like this in the browser: By the way, you can choose your favorite band. You don t have to choose the Spice Girls ;) If you d rather think about sports, then choose your favorite team or athlete.

27 Add an Image Place your image in the same folder as your HTML page. The image tag has the following syntax: Here s an example where you can specify the image size: The alt attribute is optional. It specifies the text to display if the image cannot be displayed. Read more about images here:

28 How to Get an Image from the Web You can take any image from the web and use it for your own page. Here s how to do it: 1. On the web page which contains the image you want, right click and select Save Image As :

29 Get an Image from the Web (cont d) 2. Be sure to save the image in the same folder as your.html file! 3. Notice that image file names taken from the web have really long names. Replace this long name with an easy name to type:

30 Add the Image Code Copy and paste the following image code to your.html file. Be sure to change the image name to the name which you gave it when you downloaded it: <img src="spicegirls.jpg" style="width:300px; height:300px">

31 Your Page So Far: Woo Hoo! Be patient, we re about to make this look better. First, lets finish adding the content. We need to add a more descriptive paragraph and a navigation bar to other pages.

32 Add a Descriptive Paragraph You can add text to your page by simply copying and pasting text from another website or any other document. Here s how to copy and paste a paragraph into your own page: 1. Select the text you want to copy. Right click and copy:

33 Add a Descriptive Paragraph 1. Paste it into your.html file. 2. IMPORTANT: Be sure that the text is surrounded by paragraph tags <p> and </p>: 1. Most paragraphs copied from documents will end up being one long line. That s Ok, let it run. Just make sure the paragraph ends with a </p> tag as shown above (as well as starting with a <p> tag).

34 Unordered Lists We will be using an unordered list to create a navigation bar. For now, lets have a look at how they work: An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles). Read more about unordered lists here:

35 Create a Navigation Bar We re going to create a navigation bar at the top of the page using an unordered list of links. Add this so that it s the very last element in the <body> of your.html document: Copy and paste this code to the bottom : <ul> <li><a href=" Girls</a></li> <li><a href=" Videos </a></li> <li><a href=" the Web</a></li> </ul>

36 Your Page So Far We re done with adding the content. Now its time to apply style to the page:

37 Cascading Style Sheets What are they? We are now going to create a Cascading Style Sheet (CSS) to add style to the web page. Here are some CSS facts: CSS stands for Cascading Style Sheets CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once External stylesheets are stored in CSS files

Enhance your web page using CSS The first thing you need to do is to create a new.css file: 1. Create a new file in the same folder as your.html file and name it style.css 1.

38 Enhance your web page using CSS The first thing you need to do is to create a new.css file: 1. Create a new file in the same folder as your.html file and name it style.css 1. You can choose File->New in Notepad++ 2. Or you can create directly in the windows explorer: 3. Be sure that the style.css file ends up in the same folder as your.html file!!

39 Linking to a CSS file You now need to create a way for your.html file to link to the style.css file. Inside your.html file you have to create a <head> section which contains a <link> element. The href attribute of the <link> element specifies the name of the.css file to be linked to the HTML document. In our example the.css file is called style.css : Here s the code if you need to copy and paste it in: <head> </head> <link rel="stylesheet" type="text/css" href="style.css">

40 Style the Document Body The following code operates on the <body> element in the.html page. In this example, we re setting the width, background color, and centering the page: Paste in the following code to your new style.css file: /* Set the style for the page body */ body { width:600px; background-color: LightYellow; margin: 0 auto; }

Have a Look Refresh the web page and have a look. If you don t see any effect then check the following: The style.css file is in the same folder as your.html file The <link> element in your.

41 Have a Look Refresh the web page and have a look. If you don t see any effect then check the following: The style.css file is in the same folder as your.html file The <link> element in your.html file correctly specifies the style.css file You typed (or copied) the style code for the body properly and did not forget to include the curly brackets at the beginning and end of the block. You should see this: A yellow background and centered content

42 CSS Syntax How do you write CSS so that the browser understands what to do? Here s the CSS syntax explained: From:

43 CSS Style Selectors We will be using style selectors such as color and width, etc. in our project. To get an idea of all of the possible ways to style HTML elements have a look at the full list of style selectors here:

44 Color the Banner Let s use the text in the <h1> block as the banner: Therefore, we must create a style block for the <h1> element in the style.css file: This should style the banner as shown Note: the text color selector is simply color.

45 Margins and Padding You can add padding to make the banner taller. Also, you can specify the margin so that the banner text is centered if you like: The banner was made thicker with padding. Find out more about margin and padding style selectors by visiting the CSS reference page:

46 Where to Find Color Choices We just used two named colors to style the banner. If you re wondering how many colors are supported in CSS then here are some links to lists of all possible HTML colors: Named colors: Color groups: Color codes: Make your own custom colors: Play around and try out various color combinations for the banner and the background.

47 Style the Fonts Lets jazz up the banner text by choosing a different font. Here is a list of web safe fonts which are natively supported by most operating systems: Go to the page and select a font you like:

48 Select Your Font Each font has style blocks which you can copy and paste into your style.css file. The web page allows you to adjust the size and font type and to be able to preview the result:

49 Your style.css File The style.css file is starting to grow. Here s how it should look after you ve added the font styling from the web: Note: the duplicate h1 blocks are OK because each block handles different style selectors.

50 Your Page So Far Here s the result of applying font styling to the h1, h2, h3, and p tags. The page is starting to look better. There s more styling to do! Don t worry about the list of links at the bottom of the page. We ll style them last.

51 More Font Sources Google provides a large number of fonts: There are plenty of designer fonts available on the web. Here s an example:

52 Set the Image in the Paragraph Go to your.html file and type in the following style code. Before: After: This is called inline style because it is done in the opening.html tag. This is OK for images because each image tends to be unique.

Result - Floating The image now floats to the right. Find out more about floating and layout here: http://learnlayout.com/float.

53 Result - Floating The image now floats to the right. Find out more about floating and layout here: html Challenge 1: Adjust the font and image sizes to get a nice layout to your page. Challenge 2: Can you figure out how to create a margin around the image so that it is not crowded up against the text?

54 The Result of Minor Style Adjustments The font sizes have been adjusted and the image has been given a margin. Challenge: Notice how the edges of the text are straight on both the right and left sides. The text alignment has been set to justify. Can you figure out how to set this style attribute? Hint: ask your friend Google

55 Style the Navigation Bar A navigation bar is an essential component of a web page. It allows the user to navigate to other pages. A web page would be useless without a navigation bar. We need to add style to the unordered list and its list items so that they look and feel like a navigation bar. The first step is to set the background color of the unordered list. Create the following style block for the ul tag in style.css : Paste this: ul { } background-color:lightgray; padding:20px; margin: 0 auto;

56 Style the Navigation Bar List Items The next step is to style each list item which are denoted by the li tag so that: 1. They lose the bullet points - set list-style-type to none. 2. They display horizontally instead of vertically set display to inline 3. They have a margin between them set margin-right to 15 pixels Each line in the style block does the above: Paste this: ul li { } list-style-type:none; display:inline; margin-right:15px;

57 Style the Navigation Bar Links Style the links denoted by the a tag so that: 1. They lose the underlining - set text-decoration to none. 2. They have plenty of space around them set padding to 20 pixels 3. The font color isn t pure black set color to #333 which is a dark grey. Each line in the style block does the above: Paste this: ul li a { } text-decoration:none; padding:20px; color: #333;

58 Change Link Color On Mouse Over It is possible to create a link which changes color when the mouse hovers over it. Just add the following style block to your style.css file: Paste this: ul li a:hover { color:blue; background-color:tan; }

59 The Code and Result The Code: The Result:

60 Navigation Bar Challenges The navigation bar is still not quite done. Here are some challenges: 1. Make the links in the navigation bar stand out more by styling the fonts. 2. Center the links across the width of the page. 3. Place the navigation bar at the very top of the page. Result:

61 Rounding Corners You can round corners of HTML elements by applying the border-radius property. The corners of the header, navigation bar and image have been rounded to give a nice effect. Challenge: Look up how to round corners of HTML elements on the web and apply the style to your page.

an entire web page/website by just modifying one.

62 Changing Styles Now that you ve mastered how to apply CSS you can change the style, look and feel of an entire web page/website by just modifying one.css file. Here are some styles applied to the same HTML page:

63 More Styles The content hasn t changed, just the style:

64 Inserting a YouTube Video Right click on a YouTube video and select Copy embed code :

65 Inserting a YouTube Video Paste the code into the desired place in your code: Things to note: 1. The embedded video is wrapped in an iframe element. 2. The width and height can be adjusted to fit your page layout.

Inserting Your Own Video HTML5 supports a <video> element to play videos on a page. Example use: Link to More Info on the Video Tag: http://www.w3schools.

66 Inserting Your Own Video HTML5 supports a <video> element to play videos on a page. Example use: Link to More Info on the Video Tag: Things to note: Use a poster of the first frame of the video in case the browser does not support it. Autoplay is not supported on mobile devices.

67 Video Source Code Paste this code into your page. Be sure to include the highzoom.mp4 and high-zoom.jpg files in the same folder: <video width=360px controls poster="high-zoom.jpg"> <source src="high-zoom.mp4" type='video/mp4' > Your browser does not support the video tag. </video>

68 The Bootstrap Grid System Bootstrap is a CSS / JavaScript framework which provides a page layout system which adapts to different device screen sizes. This is known as Responsive Design as the page layout responds to the device screen size and thus looks good on all devices. W3Schools Overview: m.asp Bootstrap Page:

CSS worksheet. JMC 105 Drake University

CSS worksheet. JMC 105 Drake University CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html