Ugly Web Page Assignment 1

By | December 8, 2019

in this first unit you’ll be using only Notepad or if you
use a use Macintosh I suggest that you get download TextWrangler which I believe
is free for it you have a Mac that is what I use to work with here and that will serve
you well within the next several assignments. The first thing that you need
to do whenever you are making a website is you need to create a folder on my desktop okay so I’m gonna go ahead
I’m gonna make a new folder and I’m gonna call this you can call it whatever
you want. Making the folder is the only time
that you can use spaces but generally even here you don’t use
spaces because if you have to upload the whole folder to website you don’t want any spaces you don’t want
any funky characters like apostrophes or question
marks or anything like that just letters and numbers and generally you want to be all
lower-case letters because a lot of servers are
case sensitive so if you like putting called folder by
capital letter here and then further on down the
line you put this folder into a website then try to link to it and your case doesn’t match, you’re not gonna find it so like say I want to just call this IMED1316 which I may already have one here no its
gonna let me do it okay cool. Now I’m going to save my
things in here and we’re going to talk about file
structure actually let’s go ahead and make file structure here I’m going to go
ahead and I’m going to create a new folder inside I’m gonna call this images up I can also call this maybe assets there
really anything I want to do but it’s important that you keep this
file structure don’t peak making references to you know documents that are somewhere
outside like don’t call of an image that is sitting
on your desktop for web page that is inside if this
folder because things are going to get lost that way
links will get broken so everything that you need for your website should go
inside if this folder and will be linked accordingly accordlingly so I’m going to go ahead and I’m going
to open up you can’t see it cuz I’m outside of my
view here but I’m gonna go ahead and I’m going to open on a Windows machine it’s going to
be accessories and I’m going to use Notepad not can use WordPad that the other
option here but Wordpad saves some other information under this under the scenes behind the
scenes that will actually mess up your files so you don’t want to do that you want to
use notepad and Macintosh again I I recommend TextWrangler but
you can’t look if you do a Google search for you know
goods text editor for HTML editing anything is OK I’m not going to
recommend that but you just want a real basic text editor at this point. So gonna go ahead and open up open up Noteplad okay So here’s my notepad and I’m going to go
ahead I’m going to save this very first page I’m going to find that folder in my on my desktop or I saved it but yours
could be anywhere may be in your documents or something IMED1316 now this is really
important because no right now this is just a regular flat out text file right I don’t want it to be a text file
I’m gonna save it as up a .HTML file now I can call my first page either default.html or I can call it index.html it’s important that you use one of those
two names don’t call it page 1 or something like
that the reason why I have to use one of those changes because servers look for those two words so when you boot up like
you don’t have to take or .PHP or whatever it is they’re
using because the server knows to look for
index or default so I’m gonna go ahead I’m going to save
this as index replacing that .txt and I’m going to
say .HTML this is what will allow the computer to
know that it’s a web page we’re looking at as opposed to a regular text file so let the computer know that instead of
opening up with the text editor it should open it up with whatever your browser i. I’m gonna go ahead hit save. Now the other thing, whenever we have a a browser opening up our pages we have
to let the browser know they were actually talking HTML because there are other forms that pages
like I said there’s PHP there’s JavaScript pages there’s aspx
pages whatever and we need to let the browser know that
this block of code that we are executing right now is HTML. Now whenever you use something
like this we have what we call the opening tag and
the closing tag all over code that is related to this
needs to be between those two opening and closing tags A web page is made up, just like you are, a head so I have to open it was my head and the body I can also just for readability start
adding tabbing things in usually my head and body tag I don’t really tab in. You can use tabs whatever spaces, inside your HTML whatever you need to do
to make it more readable a browser does not care about what’s
called white space by skip this here, this is called white
space browser doesn’t care. It can read it
regardless that’s why if you open up a page, like, for instance let’s open up this page and I go to look at this source which I should be
able to do with my web tools I hate Internet Explorer, here let me open
up Firefox we will be using Firefox as the browser of choice or as the browser of choice you wanna have both Firefox and Internet
Explorer maybe one other thing Safari or something cuz you do in any web page that you make you want
to look at in multiple browsers however Firefox comes with multiple
tools and Firefox has these web developer tools which are awesome. so I’m gonna go ahead and I’m gonna open up my web console here move this whole thing up so I can see my web console page source that’s what I’m looking for
okay totally lost my train of thought here but this is the page that this is made
up this is the code in this was actually done a lot by hand. Microsoft or something for Ms and is an MSN not actually they’re not too
bad that’s ours you page source see there’s a lot less readable so much
text but the thing is that they don’t really
care about readability and my point here is that white space
doesn’t matter you can use white space to help make
something readable like our NVC pages or you know when they
don’t really care if you can read it or not then you can have it just so long big
bunches they can tell someone this was probably
done by hand by a real person because it does have white space but a lot of the
stuff is just junk garbage. but these are this is the code that makes the Internet run basically the HTML code makes a pretty
picture well doesn’t make pretty picture You’ve gotta make pretty pictures but it tells
a pretty pictures to all go together okay anyway so white space does not
matter now inside the head you’re going to get
the things that don’t actually show on the page for instance if you’re going to in bed
cascading style sheets CSS information that will go in here if you’re going to link to a javascript file that will go
in here if your gonna put in meta-data yeah like meta keywords or
something like that stuff that doesn’t actually show on the page that’s all going to go into the head but for this particular sign it really
want to talk about that at that moment because I want to focus on what’s down in here the step in the body that’s a step that actually shows on the
page so I can say in here I can put title for instance yes do h1 which is heading h1 is the biggest headerer that we have
to go ahead and hello world up gonna go ahead and save this now if you
look at my folder here you see that I have my index by pop that
open there’s my page hello world right there okay so that’s the basics now if I wanted to
start putting images and things on this page I would go ahead and I would save them
just can’t drag this I’d rather be I’m gonna have to rename
it because it’s not name properly put that down here in the images four
know what’s wrong with that name their spaces there’s capitals all kinds
of stuff so I’m gonna go ahead rename this a is gonna call rather for simplicity this is a student
Prada project I’m sure they’ll love it that I
put in here hopefully nobody in this class and we recognize it so now I can say up image I am G source equals and I called this folder what images I called the folder images I have to tell it
saves outside of here I have to go into that
folder I have to tell it to go into the images
folder otherwise it would be looking for rather
out here flat great sitting right next to it yeah have to tell it to open up the
images folder so images imagerather.jpg which is I think
is what we call it right now since images I don’t don’t know if I can need to close it or
not go ahead and save/ there go It pulled up the picture. okay now I can make this actually a link if I want to up i’m taking a href paper reference whenever you make a
hyper reference I’m actually going to go out here closes tag just for fun because I have to open
and close my tags I want that thing right there to be deep what I click on Missy a trap equals HTTP have to put in the whole address up now you can see there’s a purple line
around the picture what does that indicate it’s a link right that indicates a link
and I click it opens up alamoudi cool right once you start getting into Cody
start feeling all-powerful your all like I can do come foo rate I
can so much power right so I’m not going to
go over this in super duper detail because we have a
tool here where you can go over it in super duper detail so if you go to w3schools dot com this is our textbook remember we
talked about our textbook in here so you’re going to going to learn HTML not learning html5 his basically html5
films on the core HTML so you gotta learn the
basic chord HTML first and then you can focus on the changes that html5 ads the additions so you hit this learn HTML and the cool thing about this is if you
read it it will walk you through things and then
you say try it yourself hit the strike yourself answers things
and it gives you this and you can go ahead and play with things like what would
happen if I put in HTML to her age h2 it makes it smaller and you can go in
the sayings and play with the code and make all the
samples and they have also in here yes really it’s pretty slick so start
learning HTML now you’re gonna click and it will walk you through everything you need to know this is a paragraph web browsers now this is looking really familiar so
just walk through this and then your gonna hit next chapter and you can do the samples is does it
right yourself but just flip through this and read this
and it gives you the samples and teaches you all the tags now the nice thing also is you can learn
here HTML elements it will teach you what tags are links heading attributes had images had
at tables blocks layouts but really actually I
think this is all learn HTML you flip through cans to the
next chapter next chapter so I want you to read through these do
the samples and your assignment is to create when I call the ugly website okay the ugly website is basically something
just like this it does not have to be pretty it does
not have to be colored can have everything let justified I
don’t care because learning to make things pollard
in changing the font putting things in different positions
that CSS and if you look at our handy dandy web thing which I clue huge you’ll see
that CSS is actually a little bit later on so this particular project is called ugly because it’s only using HTML tags and making pictures good up yea CCSS comes next that’s what search
making web pages pretty and change is what they look like the
cascading style rate now you’re just worried about these
things so what you’re going to do this what you
want to have started I want you over this next week to go
through that w3c schools website learn the basics of code
at least get your web pages about yourself started his remember this is about you this
project you’re gonna come up here and talk about yourself show your web page so it should be about you about my pets
about what I want to study you know whatever stuff like that at
least one page but you can make multiple pages that link to each other if you so choose I am the assignments how it will be graded if you go here you
look at ugly web page I’ll probably put a link in that page so
you can see it will go directly to the rubric I’m looking for proper file structure
which means that Boulder everything is in one folder you have the folder inside the folder
for your images I don’t want all your images and pages
all thrown in one folder I do want multiple folders at least one folder bed another one
everything within that I want to make sure that all of your
pages are properly named there’s no capital letters there’s no
funky characters anywhere okay up wanna make sure that you have your page is called index you have that
HTML tag head tag title tag body tags which you learn more about when you go into
the HTML school div tags which you’ll learn about div
tags basically just wrap around things for instance if i won see close this speak open with notepad I was behind it there
it is right there look at that 0 by the way that is a way to get
yourself in all kinds of trouble if you have more than one open because you make changes on one
save it and you go back to this one and start working on it your changes your changes if you save
this will be gone so if you start seeing that you make
changes and save and then you go back and you think that you make the changes in your
changes no longer their chances are you have more than one interface 10 pad open okay did tags: a
real simple up gonna wrap it around this stuff up that’s like division or something also
you’ll see it now called a lot well the nice thing about it tags: right now they’re not gonna do anything
but as soon as we get into cascading style sheets that is what you will use
to position things on the page you don’t move the image itself movie
div a division so I wanna see those in your
code not so much because you’re gonna do anything with them this time around but more because is how
we will do placement and things once we get into the next party I’ll see where else are we I get rid the pay acted man I closed it again man i know i
myself sometimes up deep up okay assignments the web page okay the tags at a minimum this is what I want to use
the P tag h1 tag h2 tag a tag which is your anchor
tag image tag you’ve already seen these this
is an unordered list in order to list in a break you can learn all about those in the w3c
schools 1 I can show you what they are real quick
but those are by the way I’ll show you hear more but these are the minimum tax that is a very basic as you go through
when you go through the w3c schools the w3 schools website go through the
lessons that they have your gonna learn about other tags and you can go ahead employees anything you want try to make
all kinds of stuff work right but at a minimum I’m gonna look
for these other stuff is bonus not necessarily
like points or anything but ill brownie points yes okay them when I say I would show real quick just all lists did you will ordered list okay whenever you have a list after
opening close it then you can make list items up deep deep okay you can see Pierre Weiss startin to tab things and is gonna be
kinda handy have man ordered lists and then I have my items inside that an
ordered list so having things and spacing things out
becomes kinda a handy thing so how does this look man ordered list if I want to have this link to more than
one page which I assume that you will I can go ahead and file save this as larry had the structure balls call
this page 2 up I mean to lead all the stuff outta here up go back open up my index open with
notepad up draft for the folder here like appearance a images rather join you to
folder why not because it’s in the route sitting there right next to it inside
that folder so I don’t need to put a folder I can
just call directly page to dot HTML up K notice here that I am putting this making sure that I have
these things inside my a tags: are both inside my el Tex my
link list item tax I don’t wanna say instead
of putting this outs inside if they’re flight times
you’ll see things like this this is called nesting air you don’t
wanna have nesting years right now it probably works just fine as you get further down the line that’s
going to be bad so I want to make sure that might tags
are properly nested my anchor tags Maytag is inside my list
item my list items here inside of my route my route are my
inside my body my body tag inside the HTML you don’t want to get
your tags at a border that’s why a lot of times you’ll see people take the open tagged closed tagged put the cursor
inside and start typing as you don’t want to get nesting years K index see this is now purple it’s a link I go to page two it’s a pretty simple
assignment but I want it to be about you because
it’s going to be your introductory introductory thing acadia pretty much have an understanding what
you doing awesome

Leave a Reply

Your email address will not be published. Required fields are marked *