html tags

<h1>I code, therefore, I am</h1>

html tag that creates main heading

<h1>I code, therefore, I am</h1>
<h2>René Descartes</h2>

<h2> is HTML tag for subheading </h2> at end to close the tag

<!-- This is an HTML comment -->
<!-- 
    This is a multi-line HTML comment
    It can span multiple lines
-->

comment format in HTML

use <h3> <h1> and <p>

<h1>Humans have reached mars</h1>

<h1> creates big header

/ for </h1> at ending tag makes header bold

<h3>The Starship rocket successfully landed on the red planet this morning.</h3>

<h3> creates a subheading just like <h2> does but <h3> subheading is in a smaller font than <h2>

The Higher the # for <h#>, the smaller the font gets ( think of it as because it becomes the subheading of a subheading, making it smaller and smaller each time there’s a new subheading number)

<p>After a 115 days long journey, the crew of 12 finally arrived at their destination. This is the first time humans have set foot on a planet other than Earth.</p>

<p> is like System.out.print as seen in java it prints normal text that is regular sized not like the header text which is much bigger font.

<img/>
<img>

<img/> tag is a self-closing tag therefore does not require two seperate tags at the beginning and at the end

however the / isnt needed since it is just used here as an example to specify it is a self-closing tag

<img src = "name.jpg" width = "100%">

How to use the <img> tag

You have to place the image in the src folder and specify which image by providing its name and extension (.jpg typically)

to change width or dimension sizing, typically done in css but to do it with just html you do width=”100%” before the >

<div> <!-- opening nesting HTML tag-->
[content]
</div> <!-- closing nesting HTML tag-->

nesting: group html elements together which stands as a divider or contains whatever is in between the opening and closing divider

nesting HTML tags do not interfere with the display of the file and its contents it just helps divide or contain with the two divisions

<a> is an anchor tag that allows you to create links on websites

<button> <!-- opening nesting HTML tag-->
[text]
</button> <!-- closing nesting HTML tag-->

<button> HTML tag can be a clickable button and whatever text is place in between the opening and closing tag is what the button displays BUT IT DOES NOT TAKE YOU ANYWHERE you must use JS (JavaScript) for the button to work since javascript is the coding language used to establish the inner workings or functionality of the way it looks (what is done in HTML)

<!-- self-closing HTML tag -->
<input type="text" placeholder="Enter username">

order matters for what things go first or last

similar to <img> tag in the way that it is a self-closing tag

HTML input types

<!-- self-closing HTML tag -->
<input type="text" placeholder="Enter username">

type=”text”

allows user to write input in normal text

<!-- self-closing HTML tag -->
<input type="password" placeholder="Enter password">

type=‘‘password”

allows user to have it mask their password input password with •••••

html

<!-- self-closing HTML tag -->
<input type="date" placeholder="pick a date">

type=‘‘date”

allows user to configure a date

html

<!-- self-closing HTML tag -->
<input type="time" placeholder="pick a time">

type=‘‘time”

allows user to choose a time

html

<!-- self-closing HTML tag -->
<input type="color" placeholder="pick a color">

type=‘‘color”

user is allowed to pick a color with a colorpicker provided

<!-- self-closing HTML tag -->
<input type="file">

type=“file”

allows user to input a file

is written alone without the placeholder text just say “Choose file” for button and “No file chosen” on the side

<a href="file-name.html>Text here.<a>

anchor HTML tag

must provide itwith an href attribute which means hypertext reference

An anchor is a piece of HTML code that is used as a bookmark to create a link to a particular section within a page