Τα καλύτερα σεμινάρια HTML και HTML5

Το HyperText Markup Language (HTML) είναι μια γλώσσα σήμανσης που χρησιμοποιείται για την κατασκευή διαδικτυακών εγγράφων και αποτελεί το θεμέλιο των περισσότερων ιστότοπων σήμερα. Μία γλώσσα σήμανσης όπως το HTML μας επιτρέπει

  • δημιουργία συνδέσμων προς άλλα έγγραφα,
  • δομή του περιεχομένου στο έγγραφό μας, και
  • αποδώστε το περιεχόμενο και την έννοια στο περιεχόμενο του εγγράφου μας

Ένα έγγραφο HTML έχει δύο πτυχές σε αυτό. Περιέχει δομημένες πληροφορίες (σήμανση) και συνδέσμους κειμένου (HyperText) με άλλα έγγραφα. Κατασκευάζουμε τις σελίδες μας χρησιμοποιώντας στοιχεία HTML. Πρόκειται για δομές της γλώσσας που παρέχουν δομή και νόημα στο έγγραφό μας για το πρόγραμμα περιήγησης και το στοιχείο συνδέεται με άλλα έγγραφα στο Διαδίκτυο.

Το Διαδίκτυο δημιουργήθηκε αρχικά για την αποθήκευση και παρουσίαση στατικών (αμετάβλητων) εγγράφων. Οι πτυχές του HTML που συζητήθηκαν παραπάνω φαίνονται τέλεια σε αυτά τα έγγραφα που δεν διέθεταν όλο το σχεδιασμό και το στυλ. Παρουσίασαν δομημένες πληροφορίες που περιείχαν συνδέσμους προς άλλα έγγραφα.

Το HTML5 είναι η τελευταία έκδοση ή προδιαγραφή του HTML. Το World Wide Web Consortium (W3C) είναι ο οργανισμός που είναι υπεύθυνος για την ανάπτυξη προτύπων για τον Παγκόσμιο Ιστό, συμπεριλαμβανομένων αυτών για HTML. Καθώς οι ιστοσελίδες και οι εφαρμογές ιστού γίνονται πιο περίπλοκες, το W3C ενημερώνει τα πρότυπα της HTML.

Το HTML5 εισάγει μια σειρά από σημασιολογικά στοιχεία. Παρόλο που συζητήσαμε πώς η HTML βοήθησε να παράσχει νόημα στο έγγραφό μας, δεν έγινε μέχρι την εισαγωγή των σημασιολογικών στοιχείων της HTML5s.

Ένα απλό παράδειγμα εγγράφου HTML

   Page Title   

My First Heading

My first paragraph.

! DOCTYPE html: Ορίζει αυτό το έγγραφο ως HTML5

html: Το ριζικό στοιχείο μιας σελίδας HTML

head: Το στοιχείο περιέχει μετα-πληροφορίες σχετικά με το έγγραφο

title: Το στοιχείο καθορίζει έναν τίτλο για το έγγραφο

body: Το στοιχείο περιέχει το ορατό περιεχόμενο της σελίδας

h1: Το στοιχείο καθορίζει μια μεγάλη επικεφαλίδα

p: Το στοιχείο ορίζει μια παράγραφο

Σεμινάρια για έναρξη με HTML και HTML5

Το καλύτερο μέρος για να ξεκινήσετε να μαθαίνετε HTML είναι με το 2ωρο εισαγωγικό σεμινάριο του FreeCodeCamp

Στη συνέχεια, εάν αισθάνεστε πιο τολμηροί, έχουμε ένα ολόκληρο μάθημα 12 ωρών που καλύπτει λεπτομερώς HTML, HTML5 και CSS.

Δομή σελίδας

Για να δημιουργήσετε τις σελίδες σας HTML, πρέπει να γνωρίζετε πώς να δομήσετε μια σελίδα HTML. Βασικά, η δομή μιας σελίδας ακολουθεί την παρακάτω σειρά:

   Title of the Page     

1 - Η δήλωση πρέπει να είναι πάντα η πρώτη που εμφανίζεται σε μια HTMLσελίδα και ενημερώνει το πρόγραμμα περιήγησης για ποια έκδοση της γλώσσας χρησιμοποιείται. Σε αυτήν την περίπτωση, συνεργαζόμαστε HTML5.

2 - Οι ετικέτες και οι ετικέτες δηλώνουν στο πρόγραμμα περιήγησης ιστού από πού HTMLξεκινά και τελειώνει ο κώδικας.

3 - Το και οι ετικέτες περιέχουν πληροφορίες σχετικά με τον ιστότοπο, για παράδειγμα: στυλ, μετα-ετικέτες, σενάρια κ.λπ.…

4 - Οι ετικέτες και οι ετικέτες λένε στο πρόγραμμα περιήγησης ποιος είναι ο τίτλος της σελίδας. Μπορείτε να δείτε τον τίτλο αναγνωρίζοντας την καρτέλα στο πρόγραμμα περιήγησής σας στο Διαδίκτυο. Το κείμενο που ορίζεται μεταξύ αυτών των ετικετών είναι επίσης το κείμενο που χρησιμοποιείται ως τίτλος από τις μηχανές αναζήτησης όταν παρουσιάζουν τις σελίδες στα αποτελέσματα μιας αναζήτησης.

5 - Μεταξύ των ετικετών και τοποθετείται το περιεχόμενο της σελίδας, το οποίο εμφανίζεται στο πρόγραμμα περιήγησης.

Αλλαγές σε HTML5

Εισαγωγή σημασιολογικών ετικετών

Αντί να χρησιμοποιούνται για κάθε άλλο κοντέινερ, υπάρχουν αρκετά σημασιολογικά (αυτές οι ετικέτες βοηθούν τους αναγνώστες οθόνης που χρησιμοποιούνται από άτομα με προβλήματα όρασης) όπως . Επομένως, συνιστάται η χρήση αυτών των ετικετών αντί της γενικής χρήσης .

Στοιχεία HTML

Τα στοιχεία είναι τα δομικά στοιχεία του HTML που περιγράφουν τη δομή και το περιεχόμενο μιας ιστοσελίδας. Είναι το τμήμα "Markup" της γλώσσας σήμανσης HyperText (HTML).

Η σύνταξη HTML χρησιμοποιεί τις αγκύλες γωνίας ("") για να διατηρήσει το όνομα ενός στοιχείου HTML. Τα στοιχεία έχουν συνήθως μια ετικέτα ανοίγματος και μια ετικέτα κλεισίματος και παρέχουν πληροφορίες σχετικά με το περιεχόμενο που περιέχουν. Η διαφορά μεταξύ των δύο είναι ότι η ετικέτα κλεισίματος έχει κάθετο.

Ακολουθεί ένα παράδειγμα χρησιμοποιώντας το στοιχείο p (

This is a paragraph.

Opening and closing tags should match, otherwise the browser may display content in an unexpected way.

XKCD comic showing the text

Self-closing Elements

Some HTML elements are self-closing, meaning they don’t have a separate closing tag. Self-closing elements typically insert something into your document.

An example is the br element (

), which inserts a line break in text. Formerly, self-closing tags had the forward slash inside them (

HTML Element Functionality

There are many available HTML elements. Here’s a list of some of the functions they perform:

  • give information about the web page itself (the metadata)
  • structure the content of the page into sections
  • embed images, videos, audio clips, or other multimedia
  • create lists, tables, and forms
  • give more information about certain text content
  • link to stylesheets which have rules about how the browser should display the page
  • add scripts to make a page more interactive and dynamic

Nesting HTML Elements

You can nest elements within other elements in an HTML document. This helps define the structure of the page. Just make sure the tags close from the inside-most element first.

Correct:

This is a paragraph that contains a span element.

Incorrect:

This is a paragraph that contains a span element.

Block-level and Inline Elements

Elements come in two general categories, known as block-level and inline. Block-level elements automatically start on a new line while inline elements sit within surrounding content.

Elements that help structure the page into sections, such as a navigation bar, headings, and paragraphs, are typically block-level elements. Elements that insert or give more information about content are generally inline, such as links or images.

The HTML Element

There’s an element that’s used to contain the other markup for an HTML document. It’s also known as the “root” element because it’s the parent of the other HTML elements and the content of a page.

Here’s an example of a page with a head element, a body element, and one paragraph:

I'm a paragraph

The HEAD Element

This is the container for processing information and metadata for an HTML document.

The BODY Element

This is a container for the displayable content of an HTML document.

...

The P Element

Creates a paragraph, perhaps the most common block level element.

...

The A(Link) Element

Creates a hyperlink to direct visitors to another page or resource.

...

Images in HTML

You can define images by using the tag. It does not have a closing tag since it can contain only attributes. To insert an image you define the source and an alternative text which is displayed when the image can not be rendered.

src - This attribute provides the url to the image present either on your P.C./Laptop or to be included from some other website. Remember the link provided should not be broken otherwise the image will not be produced on your webpage.

alt - This attribute is used to overcome the problem of broken image or incapability of your browser to produce image on webpage. This attribute, as the name suggests, provides an “Alternative” to an image which is some ‘TEXT’ describing the image.

Example

To define height and width of an image you can use the height and width attribute:

You can also define border thickness (0 means no border):

Align an image:

You are also able to use styles within a style attribute:

How to use links in HTML

In HTML you can use the tag to create a link. For example you can write freeCodeCamp to create a link to freeCodeCamp’s website.

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML links are hyperlinks. You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. It can be an image or any other HTML element.

In HTML, links are defined with the tag:

link text

Example

Visit our site for tutorials

The href attribute specifies the destination address (//www.freecodecamp.org) of the link.

The link text is the visible part (Visit our site for tutorials).

Clicking on the link text will send you to the specified address.

How to Use Lists in HTML

Lists are used to specify a set of consecutive items or related information in a well formed and semantic way, such as a list of ingredients or a list of procedural steps.

HTML markup has three different types of lists - ordered, unordered and description lists.

Ordered Lists

An ordered list is used to group a set of related items, in a specific order. This list is created with

    tag. Each list item is surrounded with
  1. tag.

    Code
    
            
    1. Mix ingredients
    2. Bake in oven for an hour
    3. Allow to stand for ten minutes
    Example
    1. Mix ingredients
    2. Bake in oven for an hour
    3. Allow to stand for ten minutes

    Unordered Lists

    An unordered list is used to group a set of related items, in no particular order. This list is created with

      tag. Each list item is surrounded with
    • tag.

      Code
      
                
      • Chocolate Cake
      • Black Forest Cake
      • Pineapple Cake

      Example

      • Chocolate Cake
      • Black Forest Cake
      • Pineapple Cake

      Description Lists

      A description list is used to specify a list of terms and their descriptions. This list is created with

      tag. Each list item is surrounded with
      tag.

      Code
      
                  
      Bread
      A baked food made of flour.
      Coffee
      A drink made from roasted coffee beans.
      Output

      Bread A baked food made of flour. Coffee A drink made from roasted coffee beans.

      Styling List

      You can also control the style of the list. You can use list-style property of lists. Your list can be bullets, squares, in Roman numerals, or can be images if you want.

      list-style property is shorthand for list-style-type, list-style-position, list-style-image.