Transcript Static Mapping with HTML Lab

Static Mapping Online
Sep. 21st , 2016
Wenwen Zhang
CP6514/Fall 2016
1
Agenda
• HTML Basics
• Updating BootStrap Templates
Wenwen Zhang
CP6514/Fall 2016
2
HTML BASICS
Wenwen Zhang
CP6514/Fall 2016
3
Anatomy of a Website
Your Content
+ HTML: Structure
+ CSS: Presentation
= Website
A website is a way to present your content to the world using HTML
and CSS to present that content & make it look good
Wenwen Zhang
CP6514/Fall 2016
4
What is HTMLT?
• HTML = Hyper Text Markup Language
• An HTML file is a text file with small markup tags
• The markup tags tell the Web browser how to display the
page
• Edit using a simple text editor in Windows or Mac or even
online
Wenwen Zhang
CP6514/Fall 2016
5
HTML Tags
• Each tag a “start tag”, “end tag”, some content in between, and
optional attributes.
• Like a “Command” to the browser and of the attributes as modifiers
of that command
Wenwen Zhang
CP6514/Fall 2016
6
HTML Basics
• The doctype isn’t an actual tag, but it needs to be at the START of
every HTML page to tell browser which version of HTML you are
using. The latest version is HTML5, as below.
HTML VERSION
Start of HTML
End of HTML
Wenwen Zhang
CP6514/Fall 2016
7
Head & Body
• The head contains
“meta”
information about
the web page.
Nothing will
actually show up
in the webpage.
• The body contains
the actual content
of the page
Wenwen Zhang
CP6514/Fall 2016
8
What goes in the body?
• Headings
• Paragraphs
• Images
• Tables
• Lists
• ….
Wenwen Zhang
CP6514/Fall 2016
9
Headings
HTML FILE IN THE TEXT EDITOR
Wenwen Zhang
HTML FILE IN THE WEB BROWSER
CP6514/Fall 2016
10
Paragraphs
HTML FILE IN THE TEXT EDITOR
Wenwen Zhang
HTML FILE IN THE WEB BROWSER
CP6514/Fall 2016
11
Images
HTML FILE IN THE WEB BROWSER
HTML FILE IN THE TEXT EDITOR
Wenwen Zhang
CP6514/Fall 2016
12
Group Different Elements Together – div tag
HTML FILE IN THE TEXT EDITOR
Wenwen Zhang
HTML FILE IN THE WEB BROWSER
CP6514/Fall 2016
13
ONLINE TUTORIALS
• W3SCHOOLS
• HTML SPEC
Wenwen Zhang
CP6514/Fall 2016
14
UPDATING BOOTSTRAP WEB
TEMPLATES
Wenwen Zhang
CP6514/Fall 2016
15
What is BOOTSTRAP?
• Bootstrap is the most popular HTML, CSS, and JavaScript framework
for developing responsive, mobile-first web sites.
• Bootstrap is completely free to download and use!
• A lot of free templates for portfolio, cv, and blog to start working on!
Wenwen Zhang
CP6514/Fall 2016
16
How to Update An Bootstrap Template?
• Download Bootstrap Template
• Open the index.html in text editor [Recommended: Sublime (Mac &
Windows), Notepad ++ (Windows only)]
• Identify the headings, image sources, and paragraphs you want to
update!
• Using COMMAND + F OR CONTROL + F to navigate the HTML
Wenwen Zhang
CP6514/Fall 2016
17
Example
• Update “Portfolio Items” 
“Welcome to My Portfolio” ?
• Control + F “Portfolio Item” to
identify the headings
• Replace the text
• Update Image?
• Replace <img
src=“img/myimage.jpg”>
Source can be
1) Relative path:
“img/myimage.jpg” (in the
save folder where this
index.html is saved there is
another folder called img,
under which there is a picture
called myimage.jpg
2) URL: if your image is from web
Wenwen Zhang
CP6514/Fall 2016
18