Skip to main content

HTML , Tags , Body , Headings , Paragraphs , Images , Bullets , Linky ,

 Hyper Text Markup Language

Over the next couple of days, we'll be taking a crash course in HTML (Hyper Text Markup Language).


HTML is a markdown language. This means that it is used to tell webpages how to render on screen (basically how to look).


It is made up of a series of instructions in <tags> that surround text/image filenames, etc. and influence how they are displayed on screen. 

 

Tags

Now let's start creating a webpage and learning about the tags.

👉 Step 1 is to tell the file that this is an HTML page. These are the first and last tags on your page.

Notice that the last tag has a forward slash before the command. This means close or end this tag. With a few exceptions, tags come in pairs - an opening tag (no /) and a closing tag (with a /). 

<html>

  
</html> 

Head
The <head> tags contain a lot of invisible information about the page that you won't see on screen. Stuff like:

How to display your webpage on different devices (desktop vs. mobile device)
Keywords
The tag that we really care about inside head is the <title> tag. You do sort of see this on screen. It's the text that goes in the tab of the web page.

Also notice the indentation. This doesn't affect the way the code works like it does in Python, but it is standard practice to show how some tags are inside others. It also makes the code much easier to read.

👉 Let's create the head and title: 

<html>

  <head>
    <title>David's World Of Baldies</title>
  </head>
  
</html> 

As soon as you start building with Replit, your site is already on the world wide web!

Copy the URL into a new browser tab or just click the 'Open in a new tab' button to see it! 

 


Body
The visible contents of the page go in the <body> tag:

<html>


  <head>

    <title>David's World Of Baldies</title>

  </head>



  <body>

  

  </body>

  

</html> 


Headings

👉 Time for headings. This is the <h> tag. There are lots of different pre-defined heading sizes. They are numbered, with 1 being the largest.

<html>


  <head>

    <title>David's World Of Baldies</title>

  </head>



  <body>

    <h1>Dave's World of Baldies</h1>

    <h2>Welcome to our website!</h2>

  </body>

  

</html> 

Paragraphs

👉 The <p> tag creates paragraph text. Each new <p> tag will create a new paragraph with a vertical spacing from the line above. This will appear using your browser's default font settings. We'll learn about changing those in another lesson.

<body>

  <h1>Dave's World of Baldies</h1>

  <h2>Welcome to our website!</h2>


  <p>We all know that throughout history some of the greatest have been Baldies, let's see the epicness of their heads bereft of hair.</p>


  <h2>Gallery of Baldies</h2>

  <p>Here are some of the legends of the bald world.</p>

  

</body> 

Images

Inserting an image in HTML is a bit tricker than just copying and pasting. We have to:


Save the image in a folder

Name it (ideally with no spaces)

Tell the HTML where to find the image

👉 Let's insert an image.

 1.Drag & drop the image from your local files to the repl files pane.




2.Rename it (KEEP THE FILE EXTENSION).

 

3.Use the <img> tag in your HTML code to point to the image. The src part of the tag specifies the location and I can also set the width using % or pixels 


<body>
  <h1>Dave's World of Baldies</h1>
  <h2>Welcome to our website!</h2>

  <p>We all know that throughout history some of the greatest have been Baldies, let's see the epicness of their heads bereft of hair.</p>

  <h2>Gallery of Baldies</h2>
  <p>Here are some of the legends of the bald world.</p>

  <img src="picard.jpg" width = 30%>
  <p>Captain Jean Luc Picard: Baldest Star Trek captain, and legend.</p>
  
</body> 

We've only got one image here, but if you have lots then your file pane will get messy very quickly. Good practice is to keep your images in a folder (probably called images). 





 


👉 However, if you do this, then you have to change the src tag to point to that folder first, like this:

<img src="images/picard.jpg" width = 30%>

Bullets
But what makes Picard such a great Baldy? To educate our audience, let's give them a list!

👉 I'm going to use the <ul> (unordered list) to create a bullet point list. 


If I used the <ol> tag instead, I'd get a numbered list.

The <li> tag means list item, and each item in the list gets one.

<body>
  <h1>Dave's World of Baldies</h1>
  <h2>Welcome to our website!</h2>
  <p>We all know that throughout history some of the greatest have been Baldies, let's see the epicness of their heads bereft of hair.</p>
  <h2>Gallery of Baldies</h2>
  <p>Here are some of the legends of the bald world.</p>
  <img src="picard.jpg" width = 30%>
  <p>Captain Jean Luc Picard: Baldest Star Trek captain, and legend.</p>
  <ul>
    <li>Beautiful bald man</li>
    <li>Calm and cool under pressure</li>
    <li>All the Picard memes</li>
  </ul>
  
</body>

Linky Linky
To link between webpages, we need another page, so let's quickly make one: 



👉 Now, we can link to it. I've used the <a href> tag to create a link at the bottom of my page.

The href argument specifies the location of the webpage being linked. It's short for 'hypertext reference'.

<body>
  <h1>Dave's World of Baldies</h1>
  <h2>Welcome to our website!</h2>
  <p>We all know that throughout history some of the greatest have been Baldies, let's see the epicness of their heads bereft of hair.</p>
  <h2>Gallery of Baldies</h2>
  <p>Here are some of the legends of the bald world.</p>
  <img src="images/picard.jpg" width = 30%>
  <p>Captain Jean Luc Picard: Baldest Star Trek captain, and legend.</p>
  <ul>
    <li>Beautiful bald man</li>
    <li>Calm and cool under pressure</li>
    <li>All the Picard memes</li>
  </ul>
  <p><a href = "page2.html">Go to page 2</a></p>
  
</body>

👉 If I wanted to link to an external site about Picard, I'd just grab the full page URL and put that as the href argument. Like this: 

<p><a href = "https://memory-alpha.fandom.com/wiki/Star_Trek:_Picard">Captain Jean Luc Picard: Baldest Star Trek captain, and legend.</a></p>

To link an image, I would surround the <img> tags with <a> tags. 









 




Comments

Post a Comment

Popular posts from this blog

FOR LOOP , RANGE

  FOR LOOP  A  while  loop is perfect to use when we  don't  know how many times we want the loop to repeat.  If we have an idea of how many times we want the loop to repeat, we can use a  for  loop to loop code in exactly the same way the  while  loop did.  EXAMPLE :  for counter in range(10):   print(counter) RANGE  The  range  function creates a list of numbers in the range you create. If you only give it one number, it will start at  0  and move to a state where the final number is  one less  than the number in the brackets. In this case, the final number would be  9 .  EXAMPLE :  total = 0 for number in range(100) :   total += number   print(total)
Post a Comment
Read more

ALL ABOUT WHILE LOOP

 WHILE LOOP  A  while  loop allows your code to repeat itself based on a condition you set.   EXAMPLE : counter = 0 while counter < 10:   print(counter)   counter +=1 Infinite Loop  You have to be  really  careful that you don't accidentally invoke an infinite loop! This is where the computer will loop code until the end of time. Without a break. Forever.  This is just saying "count to 10 by 1 each time." to make the loop end. Don't forget, if your  condition  is a  >  then you might need to  -= . This will subtract from the variable instead of adding to it.   EXAMPLE : counter = 0 while counter < 10:   print(counter)    counter += 1
Post a Comment
Read more

IF AND ELSE STATEMENT

  If Statements    These statements are a bit like asking a question. You are telling the computer:  if  something is true,  then  do this specific block of code. Double equals ( == ) is asking the computer to compare if these two things are  exactly  the same.  EXAMPLE :  myName = input("What's your name?: ") if myName == "David":  What is else? IF  the condition is  not  met with the  if  statement, then we want the computer to do the  else  part instead. Likewise, if the condition  is  met in the  if  statement, then the  else  bit is ignored by the computer. The  else  statement must be the first thing  unindented  after the  if  statement and in line with it    EXAMPLE :  myName = input("What's your name?: ") if myName == "David":  print("Welcome Dude!")  print("You're just the baldest dude I've ever seen...
Post a Comment
Read more