html

Introduction to html

html stands for hypertext markup language

html is the foundation of webpages, it is needed everywhere to display content.

the html tags wrap content and provides instructions to the browser on how to organise and display content. ex= if we use "p" with angle brackets its a tag for paragraph.

web development toolkit

  1. text editor- where the text is written and editted like vs code
  2. browser- where the code is rendered, run and tested like chrome

filetypes
all digital assets have a filetype that indicates how the data is structured, encoded and stored.
common filetypes are -

  1. images- jpeg/png
  2. audio- mp3/wav
  3. video- mp4/mov
  4. document- pdf/txt/html

html boilerplate

the boilerplate or the html template provides the basic structure and essential elements needed for a webpage.

  1. (!DOCTYPE html)- flags browser that this is html5 file, this is not actually html element.
  2. (html tag)- root element that wraps all other elements
  3. (head tag)- contains key information like title that doesn't appear on the webpage.
  4. (body tag)- contains all the visible content of the webpage.
boilerplate shortcut is ! and enter.

Nesting and Indenting

Html Text

Headings

the (h1to6) tag or the heading breaks up different section of a webpage, and are used to achieve a clear and logical structure.

Paragraphs

the (p tag) groups together related ideas and provides detail of what is being discussed in heading.
it could be single sentence or multi sentenced paragraph

lists

list types

  1. ordered list - numbered list
  2. unordered list - bulleted list
a list under list is a nested list.

comments

notes that are not displayed in browser and is mainly for documentation or as a note to self.
shortcut is cntrl+/

chrome dev tools

these tools are built into chrome browsers that allows developers to inspect debug and profile web apps.

Hyperlinks and attributes

hyperlinks are clickable text, images or element that navigates users to another webpage.
internal hyperlinks would navigate users to other webpages on the same domain while external hyperlinks navigates users to another domain.

anchor tag is to create hyperlinks in html. html attributes are within the opening anchor tag (a href) provides additional information about the html element.

hyperlinks in lists, simply add anchor tag within li tag

The ID Attribute

It provides a unique identifier for an element widely used in CSS and Javascript as well.

Anchor linking -

hyperlinks can be directly link to elements with an ID attribute, we reference that element inside na hyperlink by using a hashtag

Self Closing Tags

regular html tag requires an opening and closing tag to wrap content, the self closing tag otherwise known as void element with no content to wrap. ex= (hr) (br) (img) (meta) etc.

hr tag is horizontal rule this creats a visible line between the content and br tag is for a line break it creates a break betweeen contents.

the 2 type of image formats:

Images

they add visual identity essential for brandind and can aid in illustrating concepts easily. the image tag (img src= ""alt="") consists of a source attribute and alternative text attribute
the source attribute is the url that points to the actual image file, while the alternative text attribute is used by browsers for two main reasons -

  1. for screen readers
  2. for SEO (search engine optimisation )

the image source could be absolute or relative, we can also change the height and width by adding respective attribute after (alt ""), adding only one of these automatically follows aspect ratio.
nails hammered into a dark wavy pattern
ex = nails hammered into a dark wavy pattern
image credit = Luca Severin via unsplash

Scalable Vector Graphics

It is made by mathematical equations and instructions of rendering shapes, paths and colours
they are resolution independent and are commonly used for smaller images like logos and icons.
screen
SVG 1
typing
SVG 2

clickable SVG icon

logos and icons from undraw and ionicons