HTML

My notes on html from w3.


HTML - hyper text markup language - structure of a web page. Tags are not displayed they are rendered. <!DOCTYPE html> says the document is HTML5. <html> tag is the root of the doc. defines the whole document. <head> has meta info about the document. <title>, <body>, <h1> (is heading), <p> (is paragraph). syntax of tags: <tag> content </tag>. Web browsers essentially display html. Html 5 come out in 2014.

The visible part is the body. Headings range from h1 to h6 (decreasing in size). Paragraphs come in <p> tags. The syntax for links: <a href="https://atharvashukla.com"> This is a link </a>. Note: href is an attribute. Syntax for images is as follows: <img src="image.png" alt="alternative text" width="100" height="12">. Buttons <button> click me </button>. HTML lists: unordered: <ul>, ordered: <ol> and list item: <li>. <br> is an empty html element - it’s a line break. NOTE: html is not case sentitive. Use lowercase tags.

Attributes. href specifies the link in a tag, src specifies the file of the image. Width and height specifies the measurements. alt is the text if the image cannot be displayed. style attribute specifies the color, font, size etc. example: <p style="colo:red"> This is a paragraph </p>. The lang="en-US" attribute in the html is (again) for screen readers. title attribute in a paragraph would be like a tooltip. tips: use lowercase for attributes, use quotes in their values. id specifies a unique id for the element.

Html headings are important for search engines and users. headings are from h1 to h6, but syle attribute can be used to change the font-size (property). <hr> is a horizontal line. html is <head> is not displayed, it is for metadata, ex: <meta charset="UTF-8">. note that html removes extra lines and spaces in content. <pre> element is for preformatted text. syntax for style attribute: <tagname style="css-property1:css-value1;">. Some such css properties and values are: background-color:powderblue, color:blue, font-family:verdana, font-size:300%, text-align:center. Some html elements are for formatting: <b> for Bold text, <strong> for Important text, <i> for Italic text, <em> for Emphasized text, <mark> for highlighted (marked) text, <small> for Small text, <del> for striked out (deleted) text, <ins> for underlined (inserted) text, <sub> for Subscript text, <sup> for Superscript text. Browsers display <strong> as <b>, and <em> as <i>. <q> for short quotations, <blockquote> for quoting from another source, there’s even a cite attribute. marking abbreviations (or acronyms) - <abbr> - gives useful info to browsers. There’s also an <address> tag for street address and a <cite> tag displayed in italic. A weird one: <bdo dir="rtl"> dammit im mad </bdo> is a bidirectional override. Comments: <!-- comment -->. In html, colors can be specified using color names like: DodgerBlue and MediumSeaGreen, or rgb like rgb(255, 99, 71) or hex: #ff6347 or hsl or rgba or hsla. Color can be put in a heading/text stype, as a value for the color property, in a border like: border:2px solid color-name or as a background-color. In rgba, the alpha param is for transparency. hex is same as rgb but the values are from 00 to ff instead of 0 – 255 are are appended together. hsl is hue (color wheel), saturation (grayness/intensity), lightness (brightness). hsla also has alpha.

CSS is cascading style sheets. 3 methods to add css: inline as attribute, <style> tag and lastly: in a .css file. Internal css: put tagname follored by prop:val in brackets in a style element. external css can be linked as <link rel="stylesheet" href="styles.css">. Both kinds of css styling is added in the head section. for text use: color, font-family, and font-size. there is a border property for border around an html element. padding for space between text and border. margin for margin space outside the border. id can be referenced using #-prefix in css. class attribute can be added to elements. to reference them as elem.class in css. Example: <p class="error">I am different</p> and p.error {color: red;} in css. in the link eleme, the href can refer to a url. links syntax is: <a href="url"> text </a>. href is the destination. target specifies where to open the link. _blank opens in a new window/tab, _self in the same page (default), there are others like: _parent and _top. Images can be links. title tooltips can be added to links. Links can be colored in various ways, the a element has classes like link, visited, hover and active that have various properties like color, background-color and text-decoration (placed within the {}) which can be altered in the css. adding padding and background, hover info, etc makes them look like buttons. We can define bookmarks by referencing ids using #. Can also add link to a bookmark on another page: href="something.html#bookmark". Image sizes can be altered using style attribute and by specifying width and height properties. width and heigh can be directly specified but it’s better to use the style element (not attribute). relative path can be specified in src attribute, even links can be specified there. gifs can also be added in the same manner as images. put float:right or left in style to make the image more fluid wrt the text.

Didn’t know about this. image maps let you click on parts of image and have functionality (link) attached to that. following add usemap="#workmap" to an image. Then specify a map which has a series of area tags with shape, coords, alt, and href properties. Background images can be attached to an element using the background-image: url('image.png');. For putting a backg image on the full page, use body. by default it repeats, put background-repeat: no-repeat;. background-size: cover; makes an image cover the whole element. To keep it that way despite resizes use: background-attachment: fixed;. To make it stretch with resizes, use: background-size: 100% 100%;. The <picture> elements have a series of source tags, each source tag has a media and a srcset attribute. media can describe something like: "(min-width: 650px)" so this gives flexibility across device sizes. and srcset can be various sources for each source. the last element is simply an img element for browsers that don’t support this html5 feature, or if none of the src tags are matched. This is also good for bandwidth and format support. The first source element that matches is used.

Done: HTML. Introduction, Editors, Basic, Elements, Attributes, Headings, Paragraphs, Styles, Formatting, Quotations, Comments, Colors: Colors (RGB, HEX, HSL), CSS, Links: Links (Link Colors, Link Bookmarks), Images: Images (Image Map, Background Images, The Picture Element).


Todo: Tables, Lists, Blocks, Classes, Id, Iframes, JavaScript, File Paths, Head, Layout, Responsive, Computercode, Entities, Symbols, Charset, URL Encode

Tables are defined using <table> tag. <tr> stands for row which is a sequence of header - <th> - or a sequence of cell data - <td>. Can add border by using border: 1px solid black;. For collapsed borders add: border-collapse: collapse; to add more border space add: border-spacing: 5px;. To add cell padding, add: padding: 15px;. to align to the left, add: text-align: left;. add colspan="2" or rowspan="2" attribute (to a th for example) to make it span over multiple cells. Use the <caption> tag to add a caption. Start an unordered list with <ul>, an ordered list with <ol>. Have a sequence of <li>s spliced in. Style attribute with a list-style-type: can be added with values: disk, circle, square, or none can be added. type= attribute with either "1", "A", "a", "I", "i". Description Lists are <dl> with the “term” <dt> and then “description” <dd>. html lists can also be nested. the list counting can be controlled using a start attribute. lists can be styled horizontally to mimic a navbar, use float:left and display:inline. block elements: <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>. inline element: <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>. <div> is a container for html elements. <span> is a container for text.

class="class-name" attribute is for styles. use .class-name to style. “field access” : element.class-name for accessing class id in inline elements. class="city main" can access .city and .main. In JS: document.getElementsByClassName("city"). id attributes are unique. accessor: #id-name. id can be used as bookmarks. In JS: getElementById("id-name").innerHTML. iframe is a webpage within a webpage. <iframe src="URL"></iframe>, height and width can be set, border can be edited, can be used as a target for a link, “target” in link should be the “name” of the iframe. Javascript should be in script tag, noscript is when js is not allowed. Paths: pic.jpg pic is located in the same dir, images/pic.jpg in subfolder, /images/pic.jpg in images dir in root, ../pic.jpg - outer folder. <head> stored metadata, following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>. title goes in the tab. style is for styling, link is for linking style sheets. Meta is for meta info, viewport is for scaling: <meta name="viewport" content="width=device-width, initial-scale=1.0">. base specifies the base url for all relative paths.

Html layout: <header>: header for a document or a section,<nav>: container for navigation links,<section>: section in a document,<article>: an independent self-contained article,<aside>: content aside from the content (like a sidebar),<footer>: footer for a document or a section,<details>: additional details,<summary>: heading for the <details> element. Do not use tables for layout. can use css frameworks: w3.css, bootstrap or use css floats. Css flexbox and Css grids are also options. computercode: <code>is programming code,<kbd>is keyboard input ,<samp>is computer output,<var>is a variable,<pre>is preformatted text. For some characters we have to use &entity_name; OR &#entity_number;. non-breaking-space: &nbsp;&#160;, < less than &lt;, &#60;, > greater than &gt;, &#62;, & ampersand &amp;, &#38;, " double quotation mark &quot;, &#34;,' single quotation mark (apostrophe) &apos;, &#39;. Glyphs can also be added to letters like: a&#768;. There’s also support for symbols like for-all using: &#8704; or &forall;. Character encoding: <meta charset="UTF-8">, and in css: @charset "UTF-8";. URL encoding. XHTML is stricter.


Beyond the tutorial = Forms: Forms, Form Elements, Input Types, Input Attributes. HTML5: HTML5 Intro, HTML5 Support, HTML5 New Elements, HTML5 Semantics, HTML5 Migration, HTML5 Style Guide.Graphics: Canvas, SVG.Media: Media, Video, Audio, Plug-ins, YouTube. APIs: Geolocation, Drag/Drop, Web Storage, Web Workers, SSE.