`⎚⩊⎚´ -✧

Intro to HTML & Formatting

2 min read

───✱*.｡:｡✱*.:｡✧*.｡✰*.:｡✧*.｡:｡*.｡✱ ───

HTML Elements

  • Written language with tags for different elements, such as paragraphs, headings, images, etc.
graph TD
  A[Doc] --> B[Heading]
  B --> C[Paragraph]
  B --> D[Image]
  B --> E[Table]
  B --> F[Figure]
  C --> G[Sentence]
  D --> G[Sentence]
  E --> G[Sentence]
  F --> G[Sentence]

Flow

  • The flow of pages are based on the display of elements.
  • Inline elements don’t break the flow; they don’t insert whitespace.
  • Block elements are elements that create vertical division (such as <p>)

Inline Elements

  • Changes inline elements; doesn’t break the flow of the page.
  • Includes many elements, such as:
    • <strong> and <b> → bold text
    • <em> and <i> → italic text
  • Includes many more elements including <button>, <span>, <a>, etc.

Block Elements

  • The majority of block elements are for page content.
  • Includes many elements, such as:
    • <p> → paragraph text
    • <nav> → navigation menu
    • <hr> → horizontal rule/line
    • <br> → line break
  • Lists (and all of their variants) are also block elements

Character Entities

  • Specific characters are reserved in HTML, including things such as < or >
    • Your browser will think you’re trying to create tags which would cause issues.
  • Character entities have both names and numbers:
    • &entity_name; → used when you know the entity name, such as &lt; for <
    • &#entity_num; → used when you know the entity code, such as &#60 for <

Document Structure

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Meta tags, SEO, title options, open graph, etc. -->
    </head>
    <body>
        <!-- Content that's displayed on the page -->
    </body>
</html>

Web Design Cycle

  • Websites can make or break an organization/business
  • A website has to be useful, usable, and it has to meet the needs.
  • A website is not static, it should be updated based on:
    • Changes in target population
    • Changes in content
    • Changes in technology

Steps

  1. Analysis
  2. Specification
  3. Design & Development
  4. Content Writing
  5. Coding & Testing
  6. SEO & Promotion
  7. Maintain & Upgrade

Site Mission

  • Every website has a defined mission and target audience.
  • A site mission is necessary to make pages optimized based on the target audience and goals.
  • A site mission should be a short sentence, such as:
    • BuyAHome.com is a place for people buying/selling a house without a realtor to meet, exchange information, and negotiate a purchase.

───✱*.｡:｡✱*.:｡✧*.｡✰*.:｡✧*.｡:｡*.｡✱ ───

Graph View