Web Design Unit 2: Intro to HTML

Web Design Fundamentals

• A web designer is responsible for the visual aspects of a website, such as layout, colors, and graphics.
• A web developer builds the website's structure and functionality using coding languages.

HTML Basics

• HTML stands for HyperText Markup Language.
• HTML is used for creating structured content on the web.
• The purpose of an HTML tag is to define the structure and content of a web page.
• HTML tags are formatted with an opening tag (<>) and a closing tag (>).

Structure of an HTML Page

• The 5 necessary tags needed to create every HTML document are:
  • `` (defines the document type)
  • `` (root element)
  • `` (contains metadata)
  • `` (contains the page's content)
  • `` (closing tag)
• The `` tag contains metadata, which is not visible on the page.
• The `` tag contains the page's content, which is visible on the page.
• Tags can be nested inside other tags.
• Indenting is used to make the code readable and is not necessary.

Formatting Text

• HTML tags for formatting text include:
  • h1 to h6 (headings)
  • p (paragraph)
  • em (emphasized text)
  • b (bold text)
  • hr (horizontal rule)
  • br (line break)
• h1 is larger than h6.

Links

• An attribute is used to provide additional information about an element.
• An attribute is formatted with a name and value, separated by an equals sign.
• An a tag needs three lines of code:
  • The opening tag with the attribute href (link URL)
  • The link text
  • The closing tag

Images

• The 4 attributes for an image tag are:
  • src (source URL)
  • width (image width)
  • height (image height)
  • alt (alternate text)
• To scale an image to keep its original ratio, set the width or height attribute, and the other attribute will adjust accordingly.

HTML Lists

• The difference between an unordered list and an ordered list is that an unordered list uses bullet points, while an ordered list uses numbers.
• The li tag is used to wrap each item in a list.
• The proper structure for a nested list is:
  • ul or ol (unordered or ordered list)
  • li (list item)
  • ul or ol (nested list)

HTML Tables

• The table tag contains all the information for the whole table.
• Table headers are inside the th tag.
• Table data tags are inside the td tag.
• The tr tag typically contains the table headers.
• Table data is coded by row.
• To add a border to a table, use the border attribute with a value (e.g. border="1").

Study guide for Unit 2 of Web Design, covering terms like Web Designer, Web Developer, HTML, and Metadata. Intro to HTML, its purpose, and uses.