Intermediate HTML

Here to brush up on my HTML and CSS skills! The following are notes related to HTML!

Quick recap:

HTML

• HTML: Hamburger Text Markup Language, defines the structure and content of webpages, and we use HTML elements to create all of the paragraphs, headings, lists, images that make up a typical webpage.

CSS

• CSS: Cascading Style Sheets, describes how HTML elements are to be displayed, and saves a lot of work as it can control the layout of multiple web pages at once. External stylesheets are stored in CSS files.

In this post, we will look at some HTML elements such as forms and tables, and look at some things we can do with CSS, such as variables, functions, shadows and grid layouts.

Emmet

Emmet is a plugin that is built into VS Code that helps make writing HTML and CSS more efficient with shortcuts.

Emmet Shortcuts in VS Code

<!-- Example shortcuts: -->
! 
<!-- ! brings up an HTML boilerplate with Emmet  -->

<!-- div>div -->
<div>
    <div></div>
</div>

<!-- div+div -->
<div></div>
<div></div>

Emmet Syntax

• Child: >, Sibling: +, Climb-up: ^.
• Access documentation here.

Other useful shortcuts:

• Wrap with Abbreviation: takes an abbreviation, expands it and places currently selected content in last element of generated snippet. (shortcut)
• Remove Tag: Quickly removes tag and adjusts indentation.

Adding VS Code Shortcuts:

• Click the cog icon > keyboard shortcuts, or
• ctrl + k, ctrl + s
• Access Emmet actions, and add key combination / binding.

SVG: Scalable Vector Graphics

SVGs are a common image format on the web, and are scalable being vector graphics, are essentially the mathematical formula. (Includes bezier curves probably, CS3241 memories.) This is compared to raster graphics, where the image is defined by a grid of pixels.

SVGs are defined using XML, (Extensible Markup Language), which is an HTML-like syntax used for other things such as APIs, RSS to spreadsheets. This makes it somewhat readable, and interoperable with HTML.

Some common attributes:

• xmlns: XML namespace, specifies dialect of XML.
• viewBox: defines bounds of SVG.
• class, id: functions as in HTML, for targeting element via CSS or JS or for reuse via use element.
• Elements such as <\circle>, rect, path, text are defined by SVG namespace as basic building blocks.
• Many SVG attributes such as fill and stroke can be changed in CSS.

<style>
    .container {
    max-width: 200px;
    margin: auto;
    }

    .svg-circle:hover + .svg-text-group {
    opacity: 0;
    }
</style>


<div class="container">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <rect x=0 y=0 width=100 height=100 fill="burlywood"/>
        <path d="M 10 10 H 90 V 90 L 10 60" fill="transparent" stroke="black" stroke-width="3"/>
        <circle cx=50 cy=50 r=20 class="svg-circle"/>
        <g class="svg-text-group">
            <text x="20" y="25" rotate="10" id="hello-text">Hello!</text>
            <use href="#hello-text" x="-10" y="65" fill="white"/>
        </g>
    </svg>
</div>

SVGs can be placed either linked or inline.

• Linking SVGs works the same as any image, we can use the HTML image element such as <img></img> or link in CSS. However, contents of SVG will not be accesible from the webpage.
• Inlining SVGs is to paste the content direectly into the webpage code, where SVG’s properties will be visible to your code, allowing dynamic alteration via CSS or JavaScript. This might however make it harder to read, make page less cacheable to delay loading.

Tables

HTML tables are 2d tables made of rows and columns. Although less used than buttons, links and lists, they can be useful for tabular data. However, do not use HTML tables for layout (use CSS layout techniques), as they are tag heavy and are not automatically responsive to different devices.

<style>
    table, td, th {
    border: 1px solid black;
    }
</style>

<table>
  <tr>
    <th>First Header</th>
    <th>Second Header</th>
  </tr>
  <tr>
    <td>This is a data cell</td>
    <td>This is also a data cell!</td>
  </tr>
</table>

Quick HTML Table Summary:

• ‘td’ stands for table data
• ‘tr’ stands for table row
• ‘th’ stands for table header
• table headers and cells have the colspan and rowspan attributes.
• <col> and <colgroup> elements allow defining of styling information for an entire column of data all in one place.
• <caption> nested (placed directly beneath the table tag) in <table> adds a caption to the table.
• Add structure with <thead>, <tfoot>, <tbody>, which allows marking up of a header, footer and body section for the table. This is useful for styling and layout acting as hooks for adding CSS to table.
• Tables can be nested in tables.

A nice article on html tables.