Sunday, October 24, 2021

html tutorial. part 1 - basics

 as of today every week here will be a tutorial. so let us start with base - html.


for everything here we will be basing on this template (its just a base of every single website):

<!DOCTYPE html>
<html>
<head>
<!-- in head all 'hidden' things are, like background scripts, favicon, styles, etc... -->
<style>
<!-- in style is just style, we'll talk bout it later -->
</style>
<script>
<!-- in script will be scripts, we'll also talk bout it later-->
</script>
</head>
<body>
<!-- in body are all visible elements, like graphics, video, text... -->
<script>
</script>
</body>
</html>

----------------------------------------------------------------------------------------------------------

small notes:

   ===========================           ===========================

|   <!-- --> means comment, if you        |         |   <style> and <script> tags you dont  |

|   leave it on website it wont be            |         |   have to have on your site (if you      |

|   displayed, so you can copy all code  |         |   want default browser look and         |

|   with that ;)                                       |         |   FULL compatibility with any          |

  ===========================             |   possible browser )                        |

                                                                     ============================

  ===========================          ===========================       

|   all tags need to be closed (maybe   |        |   all code put in <body> tag, so it will  |

|  except of <br>, but its another thing |        |   be shown properly =p                       |

  ===========================          ============================

----------------------------------------------------------------------------------------------------------
for a base we will start with markdown, so:

-----------------------------------------------------

<a> means link or even single underlined and blue text

+ when using href="" attribute it will just link to other website

-----------------------------------------------------

<i> means italics. literally text like that 

-----------------------------------------------------

<b> means bold. literally text like that

-----------------------------------------------------

note - you can mix tags. and for example:
<i> <b> hello world !!! </b> </i>
will show:
hello world !!!

-----------------------------------------------------

<br> means line break. like this one (doesnt need closing !!!) :


-----------------------------------------------------
<h1> to <h6> - defines size of text:

<h1>
<h2>
<h3>
<h4>

<h5>

<h6>

note: this text size is just a preview. every browser calculates it from screen size and accessibility settings. also text isnt bold/italic by default. only <h1> shows text in red color by default
-----------------------------------------------------
<sup> - superscript like that 
-----------------------------------------------------
<sub> - subscript like that 
-----------------------------------------------------
<s> - crossed out text. like that 
-----------------------------------------------------
<q> - short quote.
similar to this

-----------------------------------------------------

<code> - defines code. like this 

-----------------------------------------------------

<strong> - similar to bold - makes "strongly typed" text

-----------------------------------------------------

<small> - defines small text. similar to <h6> or <h5>

-----------------------------------------------------

<header> - defines page header. similar to <h1> and <h2>

-----------------------------------------------------

<footer> - defines footer. what more to say? separates text.

-----------------------------------------------------

<span> - makes sections on page (here i used '-' signs cause google' blogspot have only partial support. means - have but its not shown)

-----------------------------------------------------

<div> - also makes sections on page but separates text a way more (higher line spacing)

-----------------------------------------------------

<p> - paragraph. doesnt break line and makes you able to style text like that 

----------------------------------------------------------------------------------------------------------



hope this was useful - next part will be in next or after 2 weeks ;)

No comments:

Post a Comment