Giter VIP home page Giter VIP logo

lab2's Introduction

Link to published site is https://jessetwolf.github.io/Lab2/

Validation Report: validation report

Part 1. Intro to HTML

Below is a checklist to help me keep track what I have and haven't done so far. Included little tidbits of notes for future me to look back on. Descriptions found from w3schools.com and developer.mozilla.org


Document metadata

  • title (Title of page that will show up within the tab.)
  • meta (Metadata that will not be shown to user but instead given to the browser.)
  • link (usually is used to link a stylesheet, but since we're not using CSS, you can use it to link a favicon instead. The favicon is the image that is seen within the tab next to the title of the page)

Content sectioning

  • main (Signifies the main content of the document. The content inside should be unique and not repeated elsewhere or within)
  • header, footer
  • nav (Defines a set of navigation links. Is intended only for major block of navigation links)
  • h1, h2, h3 (Represents headings. h1 being the most important, going down in importance from there.)
  • section (defines a section in a document)

Text content

  • div, span (div defines a division and is usually used as a container for HTML elements which is then styled with CSS. Span is an inline container used to mark up a part of a text, or a part of a document. Div is a block level element while span is an inline element.)
  • hr (Used to define thematic changes in the content. Usually displayed as a horizontal line.)
  • p (Defines a paragraph of text)
  • ul (Defines an unordered list, aka bullet list)
  • ol (Defines an ordered list, the list will be marked with numbers by default. Types can be changed however via the type attribute.)
  • li (Defines a list item, this is used within either a ul or ol element as an item of the corresponding list.)

Inline text semantics

  • b (Specifies bold text and according to documentation should be used as a last resort and when no extra emphasis is required.)
  • strong (Defines text with strong importance. The content is typically displayed in bold. If what you are trying to bolden does not need any extra importance then use the b tag instead.)
  • i (Specifies text that you want italicized, something in an alternate voice or mood, a technical term, a phrase from another language, a thought, a ship name, etc. Should only be used when there is not a more appropriate semantic element. )
  • em (Defines emphasized text. The content is usually italicized.)
  • a (Defines a hyperlink, which is used to link from one page to another. The href attribute will be what the link actually is and due to this is incredibly important to include.)
  • br (Is used as a single line break between elements. Something to note is that this is a single tag, no closing tag goes along with this one.)

Images and multimedia

  • img ("Embeds" an image within an HTML page. Two attributes for this one that are basically required: src - specifies the path to the image and alt - specifies alternate text, text that will be displayed if the image is not reachable.)
  • audio (Adds audio controls, like play, pause, and volume. The source element is embedded within this audio element and is where the audio file itself is specified.)
  • video (Is used to show a video on a web page. Video tag has a few attributes that are important: controls - which adds in the controls, width and height, which are self explanatory. Just like the audio tag the actual file is linked via the source tag within this video element.)

Interactive Elements

  • details (Specifies additional details that the user can open and close on demand. Really any content can be put within this element.)
  • summary (Defines a visible heading for the details element. The heading can be clicked to view/hide the details.)

Forms

  • form (Used to create an HTML form for user input. Can contain one or more of the following elements: input, textarea, button, select, option, optgroup, fieldset, label, and output)
  • fieldset (Used to group related elements in a form. Draws a box around said related elements.)
  • input (Specifies an input field where the user can enter data. Can be displayed in multiple ways depening on the type of the attribute.)
    • checkbox
    • radio
    • text
    • date
  • textarea (Defines a multi-line text input control. Is often used in a form to collect user inputs like comments or reviews.)
  • datalist (Specifies a list of predefined options for an input element.)
  • select (Used to create a drop-down list.)
  • option (Defines an option in a select list. Option elements go inside a select, optgroup, or datalist element.)
  • button (Defines a clickable button. You can embed a lot of different tags within the button itself.)

*You need to have at least one input of each type specified.

lab2's People

Contributors

jessetwolf avatar satyam19946 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.