Personalized Web Design Intro

PERSONALIZED
WEB DESIGN
CLUB
Info, Basics, and Initial Setup!
Some Info About
HTML/CSS
Basic, but non essential, info!
WHAT IS HTML?
▰ It stands for “Hyper Text Markup
Language”
▰ It is the basis and structure of all web
content on earth! (Right click on any
site and press Inspect or View Page
Source to see for yourself!
▰ Not “coding”, it’s really a markup
language
3
WHAT IS CSS?
▰ It stands for “cascading style sheets”
▰ It is the basis of all design in websites
compared to the structure.
▰ Again not really programming. It’s a
style sheet language
4
Let’s move onto
YOUR site!
Let’s start with the first set of slides
WHY MAKE A WEBSITE?
▰ Express yourself creatively!
▰ Vent or talk
▰ Show your interests
▰ Talking point
▰ Time sink
▰ College resume
6
KNOW THIS BEFORE
STARTING!
YOUR SITE WILL BE THE SAME!
You can’t make an amazing website in 2 days!
And now looks like this
My site started like this (after a year of revisions and tweaks)
7
Let’s get into actually
making it!
Get out your laptops
Set up your site!
1. Go to Neocities (neocitites.org or just google it)
2. Enter your STUDENT EMAIL ADDRESS, your
username can be anything else however.
3. Write your domain (Username.neocities.org)
next to your name on the sheet we’re passing
around
4. Enter a password that you won't forget (we
recommend your student password)
5. Click free, then confirm your email!
6. You should end on a site that says “Let’s get
started!”
9
al for HTML >>
ou’re very very
o
/programming
eral)
eadfirst into
g your site!>>
an always
here to do the
l again via
een arrow!)
10
THE BASICS!
Make new HTML files. Remember to

put .html at the end!
Style.css:
The style that is consistent throughout
An image file your WHOLE site! Every html file follows
HTML FILES: not_found.HTML: this as long as it has this line.
Individual pages of your This is where you go if you try
website. Index.HTML is to go to an HTML file that <link href="/style.css" rel="stylesheet"
what your site ALWAYS doesn’t exist. type="text/css" media="all">
goes to first. Make this (site.com/home.html doesn’t
your welcome page or exist, so it goes here instead)
homepage! 11
THE BASICS!
12
THE BASICS! (HTML)
Element Name Function Example Notes
Paragraph Creates standard paragraph <p>Hello World!</p>

text
Header Creates large header text <h1>large text</h1> The size decreases as
<h2>smaller text</h2> the number after h does
<h3>even smaller</h3>
List Creates a list <ul>

<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Image Adds an image <img src="yoursite.org/dog.jpg" width="40"

height=”40”>
Hyperlink Makes the item inside link to <a href=”friendssite.org”><p>click to go to You can link to another
other things. my friends site!</p></a> one of your html files with
/file.html
Bold/Underline/italics Apply Bold, Italics, or <em><p>Italics!</p></em> Works on <P> and <h1>

underline to text <strong><p>Bold!</p></strong>
<u><p>Underline!</p></u>
13
Element Name Function Example Notes
HTML Starts an HTML file <HTML>

*all items*
</HTML>
Head All items that belong in the “head” <head> Can contain <title>, <style>,
go here *Head scripts go here (in notes) <meta>, <link>, <script>,
<head> and <base>.
Body Items to display on the site, the <body> Goes after head
“body” <p></p>
</body>
Style Define CSS code inside an HTML <head> Must be inside head to work
document. <style>
*CSS CODE BELOW*
</style>
</head>
Div Makes a division that you can use *assume all text is blue in style.css* Must be used inside body or
to apply classes <p>blue text</p> Center
<div class=”black_text”><p>black text</p></div>
Center Center all items inside <body> Must be inside body to work
<p>not centered</p>
<center>
<p>centered</p>
</center>
</body> 14
THE BASICS! (CSS)
Name Function Example Notes
html { Functions that apply the Not used often

} entirety of the document
h1, p { Functions that apply to all of p{ Some things you can use:
} a specific text function color: #000000; text-align: (left, right, center);
} color: (name or hex value);
<p>all paragraphs are now black</p> letter-spacing: (px size);
<h1>this is not black</h1>
.(class name here) { Creates a class which can .blueText {

} be applied to divs color:blue;
}
.redText {
color:red;
}
<div class=”blueText”><p>blue</p></div>
<div class=”redText”><p>red</p></div>
body { Applies to entire body body { Some things you can use:
} Background-image: url(/cat.png) Background-image: url(/image.jpg);
} Background-color: (name or hex value)
<p>check out this awesome cat behind me!</p>
15

Personalized Web Design Intro

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Personalized Web Design Intro

Încărcat de

Drepturi de autor:

Formate disponibile

PERSONALIZED

Make new HTML files. Remember to

Paragraph Creates standard paragraph <p>Hello World!</p>

List Creates a list <ul>

Image Adds an image <img src="yoursite.org/dog.jpg" width="40"

Bold/Underline/italics Apply Bold, Italics, or <em><p>Italics!</p></em> Works on <P> and <h1>

HTML Starts an HTML file <HTML>

html { Functions that apply the Not used often

.(class name here) { Creates a class which can .blueText {

S-ar putea să vă placă și