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>

{practice for later, solution}

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
Made with Slides.com