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

html forms

forms collect and submit user provided data and send it to a web server for processsing.
creating new accounts on any website is an example of form.
form acts as a container for various form elements that allows users to input different types of data.

the form tag (form action"" method"") consists of action attribute and a method attribute.
the action attribute specifies the location on the server where the data will be sent for processing.
the method attribute determines the http method used for handling the form data.

there are 3 main html elements that allows users to enter or select data in a form.

  1. form inputs
  2. text area
  3. dropdowns

form inputs

Input types- some are

the input tag is self closing tag (input type = "" name = "" placeholder = "")
the type attribute specifies the type of input, and is always required. ex: type="email", type="text", type="password", type="date".
the name attribute assigns identifier for data collection and is required when sending data to a server. ex: name="title", name="email", name="name".
the other attribute like placeholder are optional to use. ex: placeholder="enter title", placeholder="required", placeholder="disabled"

form labels

labels improve accessibility and usabilty of forms.
the label tag

[(label for= "main-title")title(/label)]
[(input id= "main-title" type="text"name= "title" placeholder= "enter title")]


the for and id attribute connects label to input.

textarea

this element is used for multiline text input used for coments and longer messages.
the textarea tag:

[(textarea id= "the-entry" name="entry" rows="3" cols="30")(/textarea)]


rows and cols sets the visible dimensions in text character, the row value is the no. of line text will fit on and col is the no. of character the text will be displayed horizontally.

dropdowns

allows users to choose from predefined options.
the select and option Tags:

[(label for="the-category") category (/label)]
[select id="the-category" name="category"]
[(option value="abc") Abc (/option)]
[(option value="pqr") Pqr (/option)]
(/select)

each option tag has a value tag which explicitly sets the value that the user chooses from the dropdown menu.

buttons

used to trigger actions like submit a form.
hyperlinks and buttons can appear visually the same but they serve differsnt purposes.

an example of form

form submission

forms need to know where to and how to send data.

form validation

the process of checking data to enure it meets the expected criteria.
client side validation
they are of two types:

  1. built in validation
  2. custom validation

checkboxes and radio button

we know differnt input types

  1. textual
  2. binary
  3. file input
  4. miscellaneous

checkbox

it allows users to select one or more options from a predefined list, here the name values are different

radio button

it allows users to select exactly one option from a predefined list, the name value is same so we add value attribute to distinguish