1.lab 1

2/8/2019 Lab 1
Lab 1 Lab 2 Lab 3 Lab 4 Lab 5 Assignment Lab 6 Lab 7 Lab 8
Final Project Good Formatting Bad Formatting FileZilla Instructions
LAB 1 - INTRODUCTION TO HTML5

Objectives
Upon completion of this lab you will have:
Configured access to your web server

A simple web page
Learned some introductory HTML
Verifing Your Connection With FileZilla

Before you begin, verify you can connect to your server with FileZilla. If you can't connect, skip
this next section ("Configuring Notepad++ with ftp access"), and continue from "Creating your first
web page" onwards.
Configuring Notepad++ with ftp access
Tip: If you're installing in a Windows 7 environment, use the 32 bit version. For
Windows 10, use the 64 bit version. The ftp plugin won't work in the other versions.
1. If you're setting up Notepad++ at home, Download and install it from the notepad++ website
2. Open Notepad++ by going to the Windows start menu > All Programs > Notepad++ and
selecting the executable.
3. Download the ftp plugin (nppftp) apprpriate for the verson of Notepad++ you installed (x86
for 32 bit, x64 for 64 bit).
4. Extract the zip file, by right clicking on it in the windows file explorer.
5. In Notepad++ go to Settings > Import > Import Plugin and select the .dll in the folder you've
unzipped (it should be in a sub folder called "bin")
6. Close Notepad++ & re-open it.
7. Go to Plugins > NppFTP > Show NppFTP Window
8. Click the icon that looks like a gear and select Profile settings. Your screen should look
similar to the following.
http://facultyweb.centennialcollege.ca/jcarman/cnet204/index.html 1/5
2/8/2019 Lab 1
9. Click "create new connection" and name your profile whatever you wish (Centennial College
seems sensible).
10. Enter the following information in the Connection tab
Hostname: studentwebftp.centennialcollege.ca
Port: 21
Protocol Type: FTPES
Username: yourstudentnumber
Password: the password you use to log into the lab PC
Initial remote directory: /thefirstpartofyourcentennialemailaddress
11. Click the left most icon in the NppFTP window (that looks like a cable) and select the
connection you just added from the dropdown menu.
Tip: Safety! If you're using a shared environment (ie the lab computers), you will need to
remember to remove your credentials from Notepad++'s ftp plug in (nppftp). Failure to
do so may result in someone else having access to your account.
Tip: Save! Remember to save regularly, in the event of power outage or other situations
that could cause loss of work.
Tip: Saving takes time! When you upload a file using NppFTP, wait until you see it
successfully complete before trying to refresh your page.
Creating your first web page

Before creating your first web page, it's best to lay out the required structural tags (an example
follows). You can then fill in the rest of the data using this simple template. Remember, a web page
2/8/2019 Lab 1
is everything that exists between the opening and closing html tags (<html> and </html>
respectively). It consists of two main parts:
1. The head, consisting of everything between the head tags (<head> and </head> respectively).
This section contains information about the document, and won't appear on the page itself.
2. The body, consisting of everything between the body tags (<body> and </body>). This
section contains the document itself, everything in here will appear as your web page.
<html>
<head>
</head>
<body>
</body>
</html>
Create a new file named index.html. This is the file you'll be editing for the rest of the lab.
The document type declaration
Add the doctype
The document type declaration tells the browser what type of document to expect. There are many
different doctypes, however for this course we will be using the one for HTML5. Add the following
to your webpage above the opening HTML tag (the doctype declaration must be the first thing in
your document).
<!DOCTYPE html>
W3Schools has some useful information on the different doctypes and their uses.
Filling in the head
Add a title
Add the title of "Lab 1" (without the quotes) to the header section of your document.
<title>Lab 1</title>
Add some meta tags
2/8/2019 Lab 1
Meta tags provide additional information about our page. These include what character encoding
you're using, and data used by search engines to index your page.
Using the meta tag, define the character set as "UTF-8" (Unicode). This tag defines metadata about
the document, and can contain many attributes. We will use several of them over the duration of this
course.
<meta charset="utf-8">
Use the meta tag to add author information to your web page (with the content of your name). An
example follows.
<meta name="author" content="Linus Torvalds">
The header can contain many other things such as embedded or external links to CSS or JavaScript,
which we will visit later.
Filling in the body
Add a heading
Headings when done properly should be used in number of importance, with 1 being most important
and 2-6 used for sub-headings in order of descending importance.
Insert the follwing using an H1 tag:
<h1>Your Name CNET204 Page</h1>
Add a paragraph
Using the paragraph tag (<p> to open and </p> to close), add a paragraph below your heading about
what you hope to learn from this course.
Comments
The comment tag can be extremely useful when you're first learning HTML, or when you have a
large block of code and want to clearly define where it begins and ends. Comments can make your
code easier to read and understand, either by someone else or yourself after quite a bit of time has
passed. Comments are not used as frequently in HTML as they are in other languages. To add a
comment you require an opening () tag. A sample follows below, please feel
free to include comments in your labs whenever you encounter something that may be useful to
remembering what you've learned later.

2/8/2019 Lab 1
To do:
Using what you learned about comments above, add a comment indicating your name and student
number as the first line of the body.
Completing the Lab

To view your page, use the following URL (substituting your information where appropriate).
studentweb.cencol.ca/firstpartofemail
Your page should look similar to the following output. If it does not, go back and complete
whatever you've missed.
Upon completion of this lab you should have a simple web page using several tags we talked about
in our first lecture. Your page should validate using the w3schools html validator. The following
questions are for furthering your knowledge only, and may appear on quizzes or tests at any time
later in this course.
Exploration Questions
1. What does html stand for?
2. What are the two main parts of a web page?
3. What sort of things appear in the header? Which two did we use in this assignment?
4. What sort of things appear in the body? Which two did we use in this assignment?
5. What is the range of heading tags? Which is the biggest? The smallest?
6. How do you access your assignments (on the web server) in the browser?

1.lab 1

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

1.lab 1

Загружено:

Авторское право:

Доступные форматы

2/8/2019 Lab 1

Lab 1 Lab 2 Lab 3 Lab 4 Lab 5 Assignment Lab 6 Lab 7 Lab 8

Final Project Good Formatting Bad Formatting FileZilla Instructions

LAB 1 - INTRODUCTION TO HTML5

Configured access to your web server

Verifing Your Connection With FileZilla

Configuring Notepad++ with ftp access

Creating your first web page

The document type declaration

Add the doctype

Filling in the head

Add some meta tags

<meta name="author" content="Linus Torvalds">

Filling in the body

Insert the follwing using an H1 tag:

<h1>Your Name CNET204 Page</h1>

Completing the Lab

Вам также может понравиться