owned this note   changed 6 years ago  
Linked with GitHub

How can I build a web page?

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Firstly, what is a web page?
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Hmm, so what's hypertext?
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Hypertext is text displayed on an electronic device that contains references, or hyperlinks, to other information.

Kind of like this.

In fact, you're looking at some hypertext right now!

Which leads us onto…

HTML is an example of a hypertext language

It stands for: Hypertext Markup Language

So, what does that mean?
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Markup language allows us to define different elements on a page in a human-readable way.

In order to do this with HTML, we need to use something called tags.

For example, if I wanted to create a paragraph of text, I would write

<p> Here is some text inside a paragraph element </p>

Which is rendered like this:

Here is some text inside a paragraph element

What if I wanted some of that text to be bold?

I could use a different set of tags, like so:

<p> Here is <b> some text </b> inside a paragraph element </p>

Which is rendered like this:

Here is some text inside a paragraph element

Ok, let's actually go and write some HTML
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →


Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

So, now that we've written some HTML, you'll be pleased to know that pretty much all webpages use HTML.

But that's not the end of the story!

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Together, HTML, CSS and Javscript make up the three core technologies of the web.

Their relationship to one another and to a webpage can be thought of grammatically - in terms of nouns, adjectives and verbs.

  • HTML: Nouns
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    • Our HTML dictates what content will be on the page. It provides our basic structure.
  • CSS: Adjectives
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    • Our CSS describes how that content should look, how it should be laid out, and what styles it should have.
  • JS: Verbs
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
    • And our Javascript brings that content to life - it allows the user to interact with the content, providing a dynamic experience and determining the behaviour of the page.

HTML

CSS

Javascript

Another analogy
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Make your own tribute web page!
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Using Codepen, try and satisfy these user stories:
br not working
  1. I can see the title, or header, of the page
  2. I can see an image on the page
  3. I can see a paragraph of bold text underneath the image
  4. I can click on a link that takes me to another website

If you finish all these user stories, feel free to keep adding more elements to your page! You may want to continue with the challenges on freeCodeCamp for inspiration.

Select a repo