Introduction To HTML

Introduction To HTML

[Note: You need a text editor to do this. You can use Notepad or Text Edit. But it's so much better to download VS Code / Visual Studio Code. Save it with an extension of .html]

HTML stands for Hyper Text Markup Language

It is used to create webpages/websites.

It has a bunch of tags within angular brackets <....>

There are opening and closing tags for every element.

Opening tags look like this <......>

Closing tags look like this

The HTML code is within HTML tags. ( // code)

Here's the basic HTML code:

<!DOCTYPE html> <html> <head> <title> My First Webpage </title> </head> <body> <h1> Hello World </h1> <p> Sometimes even I have no idea <br> what in the world I am doing </p> </body> </html>

Line By Line Explanation :

<!DOCTYPE html> : Tells the browser it's an HTML document.

<html> </html> : All code resides inside these brackets.

<head> </head> : The tags within these don't appear on the webpage. It provides the information about the webpage.

<title> </title> : The title of webpage (It's not seen on the webpage. It will be seen on the address bar)

<body> </body> : Everything that appears on the webpage lies within these tags.

<h1> </h1> : It's basically a heading tag. It's the biggest heading.

Heading Tags are from <h1> to <h6>. H1 are the biggest. H6 are the smallest.

<p> </p> : This is the paragraph tag and everything that you want to write goes between this.

<br> : This is used for line breaks. There is no closing tag for this.

-------

Now, we'll cover some <Meta> tags.

Meta tags = Notes to the browser and search engines.

They donโ€™t appear on the page.

They reside within the head tag

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Website Description"> <meta name="Author" content="Your Name"> <meta name="keywords" content="Websites Keywords"> </head>

Line By Line Explanation:

<meta charset="UTF-8"> : Makes sure all letters, symbols, and emojis show correctly.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> : Makes your site look good on phones and tablets.

<meta name="description" content="Website Description"> : Describes your page to Google and helps people find it.

<meta name="author" content="Your Name"> : Says who created the page.

<meta name="keywords" content="Website's Keywords"> : Adds a few words to help search engines understand your topic.

_____

This is my first post in this topic. I'll be focusing on the practical side more than the actual theory, really. You will just have some short bullet points for most of these posts. The first 10 posts would be fully HTML. I'll continue with CSS later. And by 20th post, we'll build the first website. So, I hope it will be helpful :)

If I keep a coding post spree for like 2 weeks, would anyone be interested? o-o

More Posts from Study-diaries and Others

4 months ago

49 Days

I have no idea what I'm doing with my life. Honestly I just wanna sit back and cry. I have around 11 lessons for tomorrow's exam and let me tell you, it's not pleasant. T-T

49 Days
49 Days

Did 7+ hours of Business Studies

Completed Arabic Assignment

My brain is honestly fried. I have no idea what the hell I'm doing, i hope the exam is easy tomorrow :")


Tags
1 year ago

I hate ANY toxic/mean motivation so much. "You dont want to study because youre tired? Study tired." No? You a) wont learn anything (much probably) b)will give yourself a headache and you'll be dissapointed in yourself.

Especially: if you're sick, YOU DONT NEED TO LEARN. YOURE SICK, GET A TEA AND SLEEP. It can wait.

3 weeks ago

Day 2 [Multimedia Elements In HTML]

Welcome to day 2 :D

Day 1 [Introduction To HTML]

Day 2 [Multimedia Elements In HTML]

Line By Line Explanation:

(An attribute is extra info added to an HTML tag. So, is a tag. Src, alt, width and height are the attributes)

Tag : Used to add images to webpages

src : Used to give the URL of the image or the name of the image file

alt : specifies what will appear on the browser in case the image doesn't appear.

Width and height : Specifies the width and height.

Tag : Used to add audio

controls: shows a play/pause bar.

: your audio file (paste your file link there).

Type: Tells the browser what file you're showing it

Tag: Used to add videos

controls : lets users play/pause the video.

width and height: size of the video frame.

: your video file (paste your file link there).

Here's The Output โ†’

Day 2 [Multimedia Elements In HTML]

Additional Tip : Download these two extensions because they're really helpful.

Day 2 [Multimedia Elements In HTML]

Live Preview helps you to look your output without having to save it every time you make a change in VS code

Live Server is similar, it just shows you the output on the webpage.

You can search for these two in the extensions icon on the side.

_____________________

Hope it helps. Tomorrow, we'll cover links and lists xD


Tags
10 months ago

10.07.2024

So... I didn't get selected for the competition but nevertheless, I'm glad I atleast tried my level best... Though, my computer teacher has now called me for another competition (not public speaking) i don't really wanna join but her glares are enough to make ice melt so... T-T

Anyway, today i:

Did some accounts sums and concepts (1 hr 30 mins)

Completed 70% of my computer assignment

Revised part 2 and 3 in lesson 3 of economics

That's it. My mid terms start from 18th so I need to pick my speed up because I have a huge portion to cover... especially in Business studies and Arabic, i haven't touched them in ages and both have 8 lessons for midterms :")


Tags
10 months ago

๐Ÿ“+๐Ÿ“–

Hey lovely Anon! Thanks for the ask :D

๐Ÿ“ what is a project/assignment youโ€™re really proud of?

Okay, so recently I had a computer project and we had to either make a video, animation or meme or whatever etc. And our team produced one video, one animation and 5 memes which was like alot of work in a span of 1-2 weeks. So, yeah, the teacher was really impressed and i was extremely happy with the results we got xD

Other one would also be a computer project, it was in junior year for the school exhibition. My friend and I did photoshop (like changing backgrounds, combining images etc) and yeah, that was cool xD

๐Ÿ“– a book/reading from your field youโ€™d recommend/really enjoyed?

To be honest, I don't know what to say cause I'm still a senior in high school xD and i have no idea about what field I'll choose so... I don't know :")


Tags
11 months ago
And A Reminder That Higher Education Cannot Be Considered Truly Democratised If Students Can Still Be

And a reminder that higher education cannot be considered truly democratised if students can still be doomed to poverty with multiple or advanced arts and Humanities degrees...

1 year ago

Tips for understanding complex topics

I've struggled with this but I'm adapting, you know? So here are some of my tips I use for this :)

If you can't understand it at once, do not think that it is hard

Many times, the topic itself if simple but the way the textbook has described it is complex so go and search for related videos and Google about it until you've got a hint about what it is.

If it's complicated, divide the sentence.

When you find yourself getting completely lost in a topic while banging your head against the wall because it's so confusing.... separate each part of the sentence while you write each part as you say it out loud. It'll help you to atleast get a short idea about the subject.

Read! Read! Read!

Read it over and over again and underline the words you think are important, write them down, explain it to yourself, draw small diagrams around your notes, connect them through visual representation. The more you use different types of senses, the better you understand it.

Give yourself time.

Let yourself grasp what the whole topic is about, do not under any circumstances have a time limit for difficult topics. I took days just to understand how Javascript loops work and I'm still not fully clear about it but i can explain the general, very basic purpose of it.

Explain it to someone or yourself

The best way to learn is to teach, this actually does work. It helps you to put your understanding in words and clear any underlying questions. And lastly...

Handwritten notes!

I cannot stress this enough but things that you've written down generally stay in your memory for longer durations. I also prefer handwritten notes to digital ones cause personally it works better.

Hope this helps! :D


Tags
11 months ago

19.06.2024

First day of school after Eid holidays and gosh, I'm tired but it was an overall alright day. Postponed the tests they were supposed to keep today (about 3 tests) and kept 2 other suprise tests... I don't think teachers know the meaning of "informing in advance" and "actually following their schedule" T-T

No one even asked for the assignments, I was annoyed because i literally wasted my time doing them and they didn't even ask ://

Anyways, I got done atleast somethings...

19.06.2024
19.06.2024

Did half of the new economics assignment

Completed Arabic homework

Completed English homework

Economics lecture (YouTube) 50 mins

Discussed computer assignment (we've barely started and we have so much to do)

Tomorrow, we have tests in economics, business studies, a seminar in English and probably my computer teacher's wrath... For some reason, despite starting so early this year, i feel way less confident than last year when i only touched my books during exams... life is so weird... And mid terms start in July (don't ask me how it's mid term already when it's only like the 2nd week of school and they haven't even completed half the portions for it T-T)


Tags
2 months ago

When people say they feel tired all the time, my only question is "What time do you sleep?" Like, If you sleep at 2 in the morning, of course you'll feel tired.

Don't set alarms in the morning. Set alarms to go to sleep. The max time you can stay awake is 12.

You sleep at the right time and you will automatically change for the better.

Don't push your body to do work beyond it's limit.


Tags
Loading...
End of content
No more pages to load
  • jacobmonkeys
    jacobmonkeys liked this · 1 week ago
  • 1k4w
    1k4w liked this · 1 week ago
  • surfrgeek
    surfrgeek liked this · 1 week ago
  • turututurutut
    turututurutut liked this · 1 week ago
  • flashtasy-blog
    flashtasy-blog liked this · 1 week ago
  • reggamb
    reggamb liked this · 1 week ago
  • murasakiangel
    murasakiangel liked this · 1 week ago
  • stressfullyuxcodes
    stressfullyuxcodes liked this · 2 weeks ago
  • outreach-labs
    outreach-labs liked this · 2 weeks ago
  • shrutitries
    shrutitries liked this · 2 weeks ago
  • whispers-from-nowhere
    whispers-from-nowhere liked this · 2 weeks ago
  • craftyravnry
    craftyravnry liked this · 2 weeks ago
  • betterlivingindustriesss
    betterlivingindustriesss liked this · 2 weeks ago
  • starbbyy
    starbbyy reblogged this · 2 weeks ago
  • ashs-reverie
    ashs-reverie reblogged this · 2 weeks ago
  • ashs-reverie
    ashs-reverie liked this · 2 weeks ago
  • corzario1
    corzario1 liked this · 3 weeks ago
  • sweetestgirlintown222
    sweetestgirlintown222 liked this · 3 weeks ago
  • blackwitchmubina
    blackwitchmubina liked this · 3 weeks ago
  • m0ss-d03z-stuff
    m0ss-d03z-stuff liked this · 3 weeks ago
  • candiceblack0
    candiceblack0 liked this · 3 weeks ago
  • charliethsfrogs
    charliethsfrogs liked this · 3 weeks ago
  • chaoticdelusionscars
    chaoticdelusionscars liked this · 3 weeks ago
  • arcupix
    arcupix liked this · 3 weeks ago
  • pickledpipis
    pickledpipis liked this · 3 weeks ago
  • thedungeonbat
    thedungeonbat liked this · 3 weeks ago
  • valtfi
    valtfi liked this · 3 weeks ago
  • coralcandymoon
    coralcandymoon liked this · 3 weeks ago
  • internonearth
    internonearth liked this · 3 weeks ago
  • dancinglikebutterfly
    dancinglikebutterfly liked this · 3 weeks ago
  • desi-girll
    desi-girll liked this · 3 weeks ago
  • bloomzone
    bloomzone liked this · 3 weeks ago
  • crypticrisps
    crypticrisps liked this · 3 weeks ago
  • study-diaries
    study-diaries reblogged this · 3 weeks ago
study-diaries - The right way isn't the only way
The right way isn't the only way

|| Isabelle || INFP-T || Study tips || Self improvement || Books ||

293 posts

Explore Tumblr Blog
Search Through Tumblr Tags