Report Blog Entry
Hi! as the title says, I am learning html and stuff like that. In this blog post I will talk a bit about it, share a video I used to learn the basics, share my notes i took while watching previously mentioned video, and share helpful links I found
so first things first, the video i used for my notes is this one!
I slowed it down and paused a lot while writing my notes, I'd recommend watching the video fully before looking at the notes so you cam absorb all of the information better.
my main purpose in learning html was so i can may layouts and stuff on this site, but along with html obviously being something i could apply to other things, i will also need to learn css to make layouts for this site. I, of course, knew that before watching the video, and I will make a similar blog post once I learn css too. i wrote all of these notes in a text document on my computer, and followed a few steps in the video just to check if i'd be able to follow the same steps; and speaking of that! i am using a windows 10 computer and i dont know what the dude who made that tutorial uses, so if neither of our instructions work then idk what to do 4 you boo.
I am substantially tired right now and have been while doing all of this. I woke up at 11 last night after falling asleep super early due to some personal life stuff, and decided to just stay up and casually learn html, as one does. a few problems have arisen though: my body thinks it should be asleep because it was dark for so long, i haven't had anything with caffeine/anything energizing since yesterday morning. I planned on having my dad read my notes to sort of proofread and check for stuff because this seems like the type of thing he'd be especially happy to support me in; but it is 6:30 in the morning and even if my dad is awake i dont want to ask him to read a massive text document on something he knows nothing about at 6:30 in the morning.
I am honestly surprised at how easily i retained this information, and also how weirdly simple html is. I mean yea remembering tags and how exactly to use all of them is something i am a bit in the dark about, but i'll learn as i go how to "optimize" everything.
in my notes i also mention this website, again i recommend you watch it before reading my notes
if you have any tips/advice/comments/corrections, please share them in the comments! have a brilliant day <3
- html stands for hyper text markup language
- html is the building block of the web, every website uses html to tell your web browser how to display the content on the page
- in order to make an html website you need to make the actual file to use on your desktop first, you do this by :
- right clicking on your desktop nad making a new folder
- open the empty folder and go to view
- go to options
- now in the folder options, go to view again
- turn off "hide extentions for known file types"
- now your folder is set up, but theres more you wanna do.
- create a text file in the folder (you should see the file extention ".txt" on it, that means the folder is set up properly)
- change the text document name to "index.html"
- as soon as you do that your browser logo should appear next to the file name, that means you did everything right and your computer knows what application
to associate with the file (wich will be your default browser)
- if you click on the file it will open in your default browser and bring you to a site made with that html file
- to edit the site that loads, you're gonna wanna edit it in in notebook (the thing you're reading this on)
- to open the index.html file with notepad you're gonna wanna :
- select and then right click on the file
- select "open with"
- select "notepad"
- you have to do this as opening the file like any other will just bring you to your browser
- whatever you type into index.html will change what your browser loads when you open the index.html file with you browser
- just typing in normal text will just add that text to the site your browser loads, BUT YOU HAVE TO SAVE THE FILE FOR IT TO WORK. you can save the file by just going
to file > save, or by useing ctrl+s with the notepad selected.
- if you edit index.html in your notepad all saved changes will be loaded when you reload the page
- you have to put all pages on a website in the same folder with the index html
- html is a declarative language, and that means you need to declare what EVERYTHING is ALWAYS
- to do so you need to use elements and tags to tell your computer and browser what everything is
- "An HTML element is a component of an HTML document that tells a web browser how to structure and interpret a part of the HTML document.
HTML elements can contain formatting instructions, semantic meaning, and content."
- this site has all html tags listed and tells you what they all do
- tags are formatted like <tag>
- in order to make an element you need to surround an element like so:
- <tag> element </tag>
- </tag> is a closing tag, you have to put it at the end of an element or the initial html tag will affect everything on the page after it
- all html script lines should be on different lines, like these notes are
- css is whats used to change the formatting, look and feel of a site. these notes do not talk about css.
- tags are case insensitive
- you can insert an element inside of an element, this is know as a nested element
- to make a nested element you just add more tags around where you want the nested element, an example being :
- <tag1><tag2>words</tag2> words</tag>
- as you can see, nested element tagging works just like normal elements.
- when using tags that bolden/italicize words, its important to use the right ones even if you visually cant tell the difference because it will change how
screenreaders will read text elements.
- html is not a coding language but rather a markup language, because instead of writing code you are marking up or declaring items
- indenting different sections of an html file makes it easier to read and edit
- adding comments can be very helpful for making the index.html of a website easier to understand for others who may edit the website, but also maybe your future self
too ;]
- to add comments (text thats only visible in the index.html and not the actual site itself), you format it like so :
- <!-- this is a comment! -->
- the funny brackets embed the comment into the file without making it visible for someone viewing the source code of the page.
- to embed a link into your page, you need to use an anchor element and you need to insert an attribute like so:
- <a href="linktootherpage.html">link to other page </a>
- the anchor elements tell your browser where to put the link, while the href attribute tells your browser what link to actually put there
- href stands for hypertext reference
- href attribute links allow you link other pages not on the site, but also pages on the site you're making as long as they are in the same folder
- that fake link code i wrote would try and send you to a page on the same website named "linktootherpage.html", and wont work if the link name and page name arent
the same
- to insert a photo into a website you'll need to add a line like this:
- <img src="cool image.png">
- that line is telling your browser exactly what image you want to add to your site
- to add an image you can either just type in the file name of an image file in your website's folder, OR you can get an image source link from the web.
- adding images the first way requires that you be able to edit the website's file folder, but otherwise works great
- adding images the second way requires that image link to exist when opening the website, but otherwise works great
- for elements like line breaks and images you dont need end tags since they are just one standalone tag that does only one thing
- when adding images you can edit the image size like this:
- <img src="cool image.png" width="400" height="122">
- those numbers added after the image file define how wide and tall the image will be in pixels.
- defining the width and height of an image makes it look better when loading in, so do it for every image you insert
- you can also add a definition of the image using alt text like so:
- <img src="cool image.png" alt="a cat wearing sunglasses">
- adding alt text makes it so that screenreader can describe what the image is, which is useful for making a site accesable for blind people
- also if for whatever reason the site cannon retrieve the image itself, it will display the alt text instead. this is a good backup for incase something happens to
your image
- you can also add audio and video sources :
- <audio src="cool song.mp3" controls type="audio/mp3"></audio>
- <video src="cool video.mp4" controls type="video/mp4" width="480"></video>
- while the structure for inserting audios and videos is similar, you may have noticed that added controls and end tags to both
- videos and audios require endtags. i dont know why. im tired.
- the "controls" tells your browser to load controls and "type=" tells your browser what type of controls to load.
- audio and videos have extra things you can do with them, which imo is fucking dope
- to insert table elements you insert alla this
- <p>
<table>
<tr>
<th>item 1</th>
<th>item 2</th>
</tr>
<tr>
<td>item 1data</th>
<td>item 2data</th>
</tr>
</table>
</p>
- now that is a whole lot of stuff, let me break down each part for you and what they do
- if you dont even know what a table is, this is a table = https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Flistoftables-140409074503-phpapp01-thumbnail-4.jpg
- first off, those tags look mighty confusing, so here's a translation of what they all mean/do:
- <p> = defines what/where a paragraph is
- <table> = defines that following elements are inside a table
- <tr> = defines that following elements are in a row in a table
- <th> = defines that following elements are the header of a table
- <td> = this defines what the data of the table is, or in other words whats actualy inside the table
- im not gonna spend more time explaining the parts of a table to you.
- to add more rows you'd just duplicate the item data parts and add your elements
- why do you need to know how to make tables? because the tutorial im watching went over it so now im going over it in my notes.
- you can also add borders around elements like so:
- <img border="1" src="cool image.png" alt="a cat wearing sunglasses" width="400" height="122">
- the number after border affects how many pixels big the border will be
- the video is going over form elements rn. i do not want to go over form elements, because i dont want half of this notesheet to be explaining tags when i linked a
site that explains them pretty good.
- in order to change the title and description of the page, in other words what the tab name will be and what your page says it is to search engines, you need to do
certain stuff
- first you need to properly structure your html page, you do so by:
- adding "<!DOCTYPE html> to the top of your page, this tells your browser the site is an html document type
- you need to add <html> before EVERYTHING in your site and </html> AT THE VERY END of your site, that tells your browser what content is html
- you need to add <head> and </head> around what you want to tell search engines about the site
- you need to add <body> and </body> around the content you want to affect how your site loads/is seen/functions
- with indentation, a basic site template would look like this=
- <!DOCTYPE html>
<html>
<head>
<title> super cool website</title>
<meta name="description" content="a super cool website with a bunch of super cool images.">
</head>
<body>
actual content of your website
</body>
</html>
- you may have noticed more tags i have not explained, i will explain them now
- "<title>" defines the title of the website
- "<meta name="description"" tells search engines the following stuff is the site decription'
- "content=" tells search browsers what to put in the site description
- i hope that makes sense to you, it does for me and i dont wanna explain it any further
- you technically dont need to format things and do alla that for the simplest of simple pages but you should
- thats all :3
thanks for reading my blog post!!!
Comments
Displaying 0 of 0 comments ( View all | Add Comment )