What is a website?
What is client-side development?
What elements constitute a website?
How do you manipulate visual properties?
faculty.washington.edu/mikefree/info343/lectures/html-css
Are we on the same page?
Let's get started
Client-side web development
Client-side web development
protocol
hostname
path
protocol
hostname
path
{how to handle the information}
protocol
hostname
path
{who has the information}
Web server
protocol
hostname
path
{where is the information}
Web server
These files contain code rendered by your browser
(we're going to create them in this course)
{let's start now}
protocol
path
hostname?
What elements constitute a website?
HTML
-
HyperText Markup Language
-
Uses <tags> to describe rendering
-
Organize content into a tree structure
Common HTML elements
-
<div>: Division of a page
-
<text>: A piece of text
-
<ul>: An unordered list
-
<li>: A list element
-
<svg>: Scalable Vector Graphic
-
<circle>: A circle...
-
<rect>: A rectangle...
All you have to do is learn how to arrange these elements on a page
{for now}
How do you manipulate visual properties?
{attributes}
Attributes
-
Define representation and behavior
-
Assign within the tag
-
Assign an id for reference, styling
-
Assign a class for grouping, styling
<text id="title-text" class="big">My Title</text>Built-in capabilities
Forms!
What's the HTML <tag> for a form?
How could you get input from a user?
<form>....</form>
<input id="input1">....</input>
Add a label to your input
<label for="input1">My Label Text</input>
How (else) do you manipulate visual properties?
{style}
Style