01100001 01110010 01110100 01101001 01100011 01101100 01100101 00110010

                            ,,             ,,                                    ..    ..         
                    mm      db           `7MM                                  pd'      `bq       
                    MM                     MM                                 6P          YA      
 ,6"Yb.  `7Mb,od8 mmMMmm  `7MM   ,p6"bo    MM   .gP"Ya           pd*"*b.     6M'          `Mb  gp 
8)   MM    MM' "'   MM      MM  6M'  OO    MM  ,M'   Yb         (O)   j8     MN            8M  "" 
 ,pm9MM    MM       MM      MM  8M         MM  8M""""""             ,;j9     MN            8M     
8M   MM    MM       MM      MM  YM.    ,   MM  YM.    ,          ,-='        YM.          ,M9  ,, 
`Moo9^Yo..JMML.     `Mbmo .JMML. YMbmd'  .JMML. `Mbmmd'         Ammmmmmm      Mb          dM   dg 
                                                                               Yq.      .pY    ,j 
                                                        mmmmmmm                  ``    ''     ,'  

youtube twitch github stackoverflow

article_2( ); matrix_style_website_via_html.txt

hello there, today i am going to show you how you can create your own website in the infamous color style of the matrix movies. for this to work you will only need a functioning pc and that is it. i will provide a few example pictures in this so called tutorial, just in case you have no clue what the fuck i am talking about. so let's start with the absolute basics:

first_step( ); some sort of texteditor + basic structure

obviously you will need a programme to write your html code in. i personally use vs_code, but that is only for my convenience. there are many fancy programmes out there, but your pre installed notepad or windows editor will do the trick, too.
in the picture you can see the basic structure of a html document. there is no content yet, that would be displayed in your browser but i will quickly describe the different tags i used.
note that tags need a starting and ending tag (the ending tag is marked by a "/")
and that you have to save your document as "name.html".

second_step( ); first content + output from the browser

the <br> i added is just a simple_tag (without the need of a closing tag) that adds a line break, you have to format your text all by yourself in html.

third_step( ); a little css to style/format the website

note the new style_tag.
in this you can define classes ".classname { }" and for those classes you can add rules. the headline class in this example is not working, i just wanted to show you a few example rules and their different values.
after you defined the different classes that you need, you have to asign them to your text in order to work.
you can do this via <div class="name"> like you see in the screenshots. but now you only have a portion of your page formattet, the black background for example is only inside the main_class.
you can also add styling to only one of your tags without the need to define a class first. just add it to the body_tag, because this defines everything you see on screen.

fourth_step( ); experimenting yourself

so now you know the basics of html based webdesign. you can create your own document, use all the basic tags, format your text with paragraphs, line breaks and headlines and you can create your own style_classes, that allow you to easily color and align your text even better.

thank you for reading this article to the end, i hope you enjoyed it and it was helpful. if you have any questions left open, feel free to contact me on my social media or to do a quick google search ;)

previous next