Introduction to web

[Lecture 1] Introduction to Web - HTML/CSS

HTML
- Abbreviation
  “PG”
  - Hypertext is the text displayed on a computer display or other electronic devices with references to other text that the reader can immediately access.
  - A markup language is a language that annotates text so that the computer can manipulate that text.
  - Hyper Text Markup Language – full abbreviation of HTML
  - HTML is basically used to define structure of a webpage.
- HTTP
  “PG”
  - HTTP is a set of rules which defines the distribution of these hyper text, how this text is formatted, transmitted and what actions should browsers perform in the response of these
- Document information, version 5 and 4.01
  “TV”
  - In HTML 4.01, you have to define the set of rules in DOCTYPE tag like <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” " http://www.w3.org/TR/html4/strict.dtd"> etc.
  - HTML5 is advanced version of HTML4. Instead of writing all rules you can only define <!DOCTYPE html>
- Tags and a basic structure
  “PG”
  - Various tags have different functionalities
  - Browser understands these tags to decide how the things enclosed in those tags should be rendered
  - Tags basic syntax, not case-sensitive
  - Self-closing tags, <br />, <img />, <hr />
  - Comments
  - HTML Attributes: Attributes provide additional information about an element, it is always mentioned in the starting tag, and mentioned as name=“value”
- HEAD Tag
  “TV”
  - <title></title>
    - Title is the text in the browser toolbar.
  - <meta />
    - Metadata is data (information) about data.
    - Metadata doesn’t impact on the physical appearance of web page.
    - name, content, charset, property, http-equiv (refreshing or redirecting)
    - Meta tag can be very useful for social networking experience.
    - https://developers.facebook.com/tools/debug/?q=hello.channeli.in
  - <link />
    - This tag is used for linking external resources like document or stylesheets etc.
    - Attributes – rel, type, href
  - <script />
    - In this tag, we can write client side scripts or can link any external script sources with src attribute in tag.
    - Attributes – async, src, type
  - <style></style>
    - This tag can be used for styling HTML page.
      “But generally not used.”
- Some commonly used HTML elements
  “PG”
  - Different HTML Tags for different purposes
  - div tag:
  - span tag:
  - a tag:
  - <p> tag:
  - <pre> tag:
  - img tag:
  - <strong> - <b> tag, <em> - <i> tag,<code> tag, <u> tag
  - List tags
    - OL tag - start, type attributes
    - UL tag - type attribute - dsic, square, circle
    - LI tag
- IFrame tag
  “TV”
  - iFrame – Inline Frame
  - Another HTML document can be embedded inside one.
    “DOM of iframe is different from parent DOM.”
  - Attributes – src, height, width, loading etc.
  - Example
    - https://codepen.io/GBora/pen/VLYyzY
    - Can embed Youtube videos in website.
- Form tag
  “PG”
  - Attributes: action, method
  - Form child elements
    - Child elements, sibling elements, parent element
    - Any type of HTML element can go inside but some special ones make special sense
    - <input> tag, type attribute: text, color, filet, email, number, required attribute,
    - <textarea> tag
    - <select>, <option> tag
- HTML API/CANVAS
  “TV”
  - https://developer.mozilla.org/en-US/docs/Web/API
  - Example
    - https://davidwalsh.name/demo/fullscreen.php – FullScreen API
    - https://googlechrome.github.io/samples/image-capture/grab-frame-take-photo.html – Image Capture API
  - Navigator – accessed by window.navigator
    - Navigator can be used to get client device information like geolocation, battery or internet connection.
    - Browser console live example
  - <canvas></canvas>
    - HTML element to draw graphics on web pages.
      “Canvas tag can only display the graphics but you have to draw with JS.”
    - Attributes – id or class, height, width
    - Used for making games, animations and interactions.
CSS
- Introduction: What is CSS, Cascading Style Sheet
  "PG
  "
  - Basic syntax:
    - selector {property: value; property: value;}
    - CSS Comments
- Including CSS
  “TV”
  - Inline
  - Internal (InFile)
    - Using <style/> tag
  - External
  - Cascading Priority Order:
    - Inline style (inside an HTML element)
    - External and internal style sheets (in the head section)
    - Browser default
- CSS Selectors
  “PG”
  - The element selector: <p>
  - ID selector, class selector: #id, .class
  - p.class : all p elements with class = class
  - Universal selecor *{}
  - Grouping CSS: using commas in between selectors
- CSS Properties
  “TV”
  - color
    - How many colors are possible for 4 bit char and int???
    - HEX, rgb, rgba
    - What if I give color to body of HTML???
  - font
    - font-family
    - font-size
    - font-weight
  - border
- CSS Advanced selectors
  “PG”
  - Attribute selector: A[attribute=value]
  - Descendant combinator: A B: All the B selectors present in A
  - Child combinator: A>B: B which are direct child of A
  - General sibling combinator: A~B, selects B which are on the same level as A, but should be of one parent
  - Adjacent sibling combinator: A+B: B adjacent to A
  - Pseudo classes: :hover, :active, :visited -> not stored in HTML tree but is a state of the element
  - p:nth-child(n): select all the p elements which is nth child of its parent
  - Pseudo elements: ‘::’ ::first-line, ::first-letter, ::before, ::after
  - https://www.w3schools.com/css/css_pseudo_elements.asp
- Units
  “PG”
  - Absolute Units: cm, mm, in, px (1/96th of an inch),
  - rem, em
  - vh, vw
  - ch: relative to the width of “0”
- Box Model
  “TV”
  - Margin, border, padding and content
  - Description of border-box
- Position property
  “TV”
  - static
    - Default property of an element.
    - Location properties are disabled for static property.
    - Use – When you have to forcefully remove a position of an element.
  - relative
    - It also exhibits the default behavior but you can locate this positioned element.
    - It will add into the current dimensions.
    - Document will give extra space for position relative div
  - absolute
    - Positioned relative to last positioned ancestors.
  - fixed
    - Positioned relative to browser window.
  - sticky
    - Normal behavior untill the fixed offset and becomes fixed relative to nearest scrolling ancestor.
    - https://css-tricks.com/position-sticky-2/
- Display property
  "TV
  "
  - inline
    - It is like a span element.
  - block
    - It is like a paragraph element. It will start to new line and cover the whole width of the parent element.
  - inline-block
    - You can give dimension to a element and it is inline with rest.
  - none
- Flex box
  "PG
  "
  - display: flex
  - flex-direction:, default value: row
  - The justify-content property is used to align the flex items on the main axis
  - align-items: The align-items property is used to align the flex items on the cross axis.
  - Cheatsheet: http://flexbox.malven.co
- Imports
  “TV”
  - Importing google fonts
  - @imports url media-queries;
  - @font-face for importing custom fonts.
- Media query
  “TV”
  - Media query is used for responsive web design.
  - Media query comprises of optional media type(describes the general category of device) and any number of media features with logical operators.
  - Media type – all, screen, speech
  - Media features – max-width, aspect-ratio, overflow etc.
- Transition and animation
  “PG”
  - transition: transition-property transition-time transition-timing-function transition-delay
  - A transition is an animation,
  - Animation and keyframes
- Grid
  - display: grid
  - Grid column
  - Grid Row
  - Column Gap: grid-column-gap
  - Row Gap: grid-row-gap
  - Grid line, grid-row-start, grid-row-end
  - https://css-tricks.com/snippets/css/complete-guide-grid/
  - Cheatsheet: http://grid.malven.co/
Semantic Ui(intro)
“TV”
- CSS Libraries
- https://semantic-ui.com/

Inline