HTML stands for HyperText Markup Language.

<p> I am just writing in html </p>

Modern Web Design:

HTML: Structure
CSS: Presentation
JavaScript: Behavior

PHP or similar: Backend
CMS: Content Management


<!DocTYPE HTML>

<html>
<head>

<title>My blog</title>

</head>

<body>

<p>I am just writing paragraph</p>

<p> its a line<br />brake</p>

</body>
</html>


<html> 

   <head>        <title>first page</title>    </head>    

<body>        <p>This is regular text </p>       

 <p><b>bold text </b></p>       

 <p><big> big text </big></p>       

 <p><i> italic text </i></p>       

 <p><small> small text </small></p>        

<p><strong> strong text </strong></p>       

 <p><sub> subscripted text </sub></p>       

 <p><sup> superscripted text </sup></p>       

 <p><ins> inserted text </ins></p>       

 <p><del> deleted text </del></p>  

<em>emphasisi</em>

 </body>

</html>


h1-h6 for headings

<h1> text here</h1>


<hr /> is horizontal tag

<hr width=”50px”/>

<hr width=”50%”>


<!– ​Your comment goes here>


contentImage

It is typical web structure above


Document structure:

<H1-h6> heading</h1-h6>

<div> page section</div>

<span> inline section</span>

<p> paragraph</p>

<br/> line break

<hr/> horizontal rule


<ol> ordered list</ol>

<ul> unordered list</ul>

<li> list item<li>


<table>table</table>

<tr>table row</tr>

<th>table cell</th>

<td>table cell</td>

use colspan to extend a cell for two or more cells

bg color

align=”center”

<table border=”2″> for double line border


links:

<a href=””> page link

<a href=”mailto:”>email link

<a name=”name”>anchor

<a href=”#name”>link to anchor

example:

<a href=”https://www.tvrex.co.uk”>link</a>

<a href=”https://www.tvrex.co.uk”target=”_blank”>link</a> opens new window


<img src=”image.jpg” height=”150px” width=”150px” border=”1px” alt=””/>


<form action=”url” method=”get”> </form>

<form action=”url” method=”post”> </form>


<form>

<input type=”text” name=”username”/>

<br/>

<input type=”password” name=”password”/>

</form>


<input type=”radio” name=”gender” value=”male” /> male

<br/>

<input type=”radio” name=”gender” value=”female”/> Female

<br/> gives one option oMale oFemale


<input type=”checkbox” name=”gender” value=”1″/>Male

<br/>

<input type=”checkbox” name=”gender” value=”2″/>Female

gives more options male or/and female


<input type=”submit” value=”submit”/>


<form>

<input name=”name” type=”text” /> <br/>

<input name=”email” type=”email” /> <br/>

<textarea name=”message”></textarea>

<input type=””submit” value=”send” class=”submit”/>

</form>


<body bgcolor=”#000099″>

<h1> <font color=”#FFFFFF”>white headline</font>

</h1> </body>


<div class=”section”>

<iframe height=”150″ width=”300″ src=”https://www.youtube.com/…”

allow full screen frameborder=”o”>

</iframe> </div>


<meta charset=”UTF-8″>

UTF-8 is default character encoding in HTML5

HTML5 content models:

-metadata

-embedded

-interactive

-heading

-phrasing

-flow

-sectioning


<!Doctype html>

<html>

<body>

<header>

<h1>blablabla</h1>

</header>

</body>

</html>


<nav>

<ul>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Services</a></li>

<li><a href=”#”>About us</a></li>

</ul> </nav>


Metadata sets up the presentation or behaviour of the rest of the content. These elements are in the head.

Embedded imports other resources into the document.

Interactive is specifically intended for user interaction.

Heading defines a section header.

Phrasing has a number of inline level elements in common with html4.

Flow contains the majority of HTML5 elements that would be included in the normal flow of the document.

Sectioning defines the scope of headings, content, navigation, and footers.


div replaced:

<article>

</h1> the article title</h1>

<p>content</p>

<aside>content is all true</aside>

</article>


<article>

<section>

<h1>………</h1>

<p>……….</p>

</section>

</article>


<audio src=”audio.mp3″ controls> audio element not supported by your browser</audio>

<audio controls>

<source src=”audio.mp3″ type=”audio/mpeg/ogg”>

format not supported

</audio>

<audio controls autoplay>

<audio controls autoplay loop>

supported mp3 wav ogg


<video controls autoplay loop>

<source src=”video.mp4″ type=”vide/mp4″>

source src=”video.ogg” type=”video/ogg”>

video not supported by your browser

</video> supports mp4, webM, ogg


Status:

<progress min=”0″ max=”100″ value=”35″>

</progress>

to display it dynamically Java script might be used


session storage and local storage:

set item(“key1” “value1”)

alert(local storage.get item(“key1”)

alert(local storage.remove item(“key1”)

alert(local storage.clear()


<img draggable=”true”/>

SVG – scalable vector graphics is used to draw shapes, XML format

<img src=”imagesvg” alt=”” height=”300″/>


circle:

<svg width=”1000″ height=”1000″>

<circle cx=”80″ cy=”80″ r=”50″ fill=”green” stroke-outline/>

</svg>


rectangle:

<svg width=”2000″ height=”2000″>

<rect width=”300″ height=”100″ x=”20″ y=”20″ fill=”green”</svg>


line:

<svg width=”400″ height=”410″>

<line x1=”10″ y1=”10″ x2=”200″ y2=”100″

style=”stroke:#000000; stroke-linecap:round; stroke-width:20″/>

</svg>


polyline:

<svg width=”2000″ height=”500″>

<polyline style=”stroke-linejoin:miler; stroke:black; stroke width:12; fill:none;”

points=”100 100, 150 150, 200 100″/> </svg>


ellipse:

<svg height=”500″ width=”1000″>

<ellipse cx=”200″ cy=”100″ rx=”150″ ry=”70″

style=”fill:green, stroke:black;”/> </svg>


polygon:

<svg width=”2000″ height=”2000″>

<polygon points=”100 100″;200 200, 300 0″

style=”fill:green,stroke:black;”/> </svg>


animations:

<svg width=”1000″ height=”250″>

<rect width=”150″ height=”150″ fill=”orange”>

<animate attributename=”x” from=”0″ to=”300″

dur=”3s” fill=”freeze” repeatcount=”2″/></rect></svg>

or indefinitive instead of 2


<canvas id=”canvas” width=”200″ height=”100″>

</canvas> where id atttibute comes from java script


path: translate, rotate(in radians), canvas, scale


<form>

<input type=”text” name=”name”/> </form>


placeholder=”email@example.com” (telling what should be entered)

autofocus makes the desired input focus on when the form loads autocomplete

<input id=”mysearch” name=”search item” type=”search”

<datalist id=”colors”>


canvas supports various other methods for drawing

draw a line:

moveTo(x,y)

lineTo(x,y)

draw a circle:

beginPath()

arc(x,y,r,start,stop)

stroke()

gradients:

createLinearGradient(x,y,x1,y1)

createRadialGradient(x,y,r,x1,y1,r1)

drawing text on the canvas:

Font defines the front properties for the text

fillText(text,x,y)

strokeText(text,x,y)


<form>

<input id=”car” type=”text” list=”colors”/>

<datalist id=”colors”>

<option value=”red”>

<option value=”green”>

<option value=”yellow”>

</datalist> </form>

input: email, url,tel


new input types:

color,date,datetime,datetime-local,email,month,number,range,search,tel,time,url,week


new input attributes:

autofocus,form,formction,formenctype,formmethod,formnovalidate,formtarget,height and width,list,

min and max,multiple,pattern(regexp),placeholder,required,step


Leave a Comment