A HTML biztosítja a weboldalak felépítését. Íme néhány példa arra, hogyan lehet HTML-szintaxist használni webhelyek létrehozásához, beleértve néhány példát az újabb HTML5-funkciókra.

Az A Href attribútum példa

Az attribútum egy hivatkozás által megadott rendeltetési helyre utal. A a(horgony) címke az attribútum nélkül halott . A munkafolyamat során néha nem szeretne élő linket, vagy még nem fogja tudni a hivatkozás célját. Ebben az esetben hasznos az hrefattribútumot úgy állítani "#", hogy holt linket hozzon létre. Az hrefattribútum segítségével helyi fájlokhoz vagy az interneten található fájlokhoz lehet linkelni.

Például:

  Href Attribute Example   
Href Attribute Example
 The freeCodeCamp Contribution Page shows you how and where you can contribute to freeCodeCamp's community and growth. 

Az attribútumot minden böngésző támogatja.

További attribútumok:

hreflang: Megadja a csatolt erőforrás nyelvét. target: Megadja azt a kontextust, amelyben a társított erőforrás megnyílik. title: Megadja a hivatkozás címét, amely a felhasználó számára eszköztippként jelenik meg.

Példák

This is a dead link This is a live link to freeCodeCamp more with a href attribute

Oldalon belüli horgonyok

Lehetőség van horgony beállítására is az oldal bizonyos részére. Ehhez először helyezzen el egy lapot az oldalon az egyik címkével és a szükséges „name” attribútummal, benne minden kulcsszóleírással:

A címkék között semmilyen leírás nem szükséges. Ezután elhelyezhet egy linket, amely ehhez a horgonyhoz vezet, az ugyanazon az oldalon található bármely helyhez. Ehhez használnia kell a szükséges „href” attribútumot # (éles) szimbólummal és a horgony kulcsszavas leírásával:

Go to Top

Kép linkek

Ez alkalmazható képekre és más HTML elemekre is.

Példa

Példa

Néhány további példa a href-re

This gives a base url for all further urls on the page This is a live link to an external stylesheet

A célpélda

Az attribútum határozza meg, hogy egy összekötött dokumentumot hol a(horgony) címkében nyissunk meg .

Példák:

A „_blank” értékű célattribútum új ablakban vagy lapon nyitja meg a csatolt dokumentumot.

 freeCodeCamp

A „_self” értékű célattribútum a csatolt dokumentumot ugyanabban a keretben nyitja meg, amelyre kattintottak (ez az alapértelmezett, és általában nem kell megadni).

 freeCodeCamp

 freeCodeCamp

A „_parent” értékű célattribútum megnyitja a csatolt dokumentumot a szülő keretben.

 freeCodeCamp

A „_top” értékű célattribútum megnyitja a csatolt dokumentumot az ablak teljes törzsében.

 freeCodeCamp

A „keretnév” értékű célattribútum megnyitja a csatolt dokumentumot egy megnevezett keretben.

 freeCodeCamp

A Body háttér attribútum példa

Ha szín helyett háttérképet akar hozzáadni, akkor az egyik megoldás az attribútum. Megadja a HTML-dokumentumok háttérképét.

Szintaxis:

Tulajdonság:

background - URL for background image

Példa:

a body-background attribútum leértékelődött

a body-background attribútum elavult a HTML5-ben. A címke stílusának helyes módja a CSS.

Számos CSS tulajdonság használható az elem hátterének beállítására. Ezekkel fel lehet használni a teljes oldal hátterének beállítását.

A Body Bgcolor attribútum példa

Az attribútum háttérszínt rendel egy HTML-dokumentumhoz.

Szintaxis :

A szín értéke lehet színnév (like, purple) vagy hex érték (like, #af0000).

To add a background color to a webpage you can use the attribute. It specifies a color for the HTML document to display.

For example:

  Body bgcolor Attribute example   
This webpage has colored background.

You can change the color by replacing ###### with a hexadecimal value. For simple colors you can also use the word, such as “red” or “black”.

All major browsers support the attribute.

Note:

• HTML 5 does not support the attribute. Use CSS for this purpose. How? By using the following code: Of course, you can also do it in a separate document instead of an inline method.
• Do not use RGB value in attribute because rgb() is for CSS only, that is, it will not work in HTML.

The Div Align Attribute Example

The attribute is used for aligning the text in a div tag to The Left, Right, center or justify.

For instance:

   Div Align Attribbute Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Important!

This attribute is no longer supported in html5. css is the way to go.

The Div Align attribute can be used to horizontally align the contents within a div. In the below example, the text will be centered within the div.

 This Text Will Be Centered 

**This attribute is not supported in HTML5 and CSS Text Align should be used instead

The Font Color Attribute Example

This attribute is used to set a color to the text enclosed in a tag.

Important:

This attribute is not supported in HTML5. Instead, this freeCodeCamp article specifies a CSS method, which can be used.

Note:

A color can also be specified using a 'hex code' or an 'rgb code', instead of using a name.

Example:

1. Color name attribute

  Font color example using color attribute  

Hex code attribute

  Font color example using color attribute  

RGB attribute

  Font color example using color attribute  

The Font Size Attribute Example

This attribute specifies the font size as either a numeric or relative value. Numeric values range from 1 to 7with 1 being the smallest and 3 the default. It can also be defined using a relative value, like +2 or -3, which set it relative to the value of the size attribute of the element, or relative to 3, the default value, if none does exist.

Syntax:

Example:

  This is some text!  

Note : The size attribute of is not supported in HTML5. Use CSS instead.

The Img Align Attribute Example

The align attribute of an image specifies where the image should be aligned according to the surrounding element.

Attribute Values:

right - Align image to the right left - Align image to the left

top - Align image to the top

bottom - Align image to the bottom

middle - Align image to the middle

For example:

   Img Align Attribute   
This is an example. More text right here 

We can also align in right if we want:

This is another example

Please note the align attribute is not supported in HTML5, and you should use CSS instead. However, it is still supported by all the major browsers.

The Img Width Attribute

The HTML ‘width’ attribute refers to the width of an image. The value in the quotations is the amount of pixels.

For example, if you already have a link to an image set up via the src attribute you can add the width attribute like so:

   Img Width Attribute   

In the code snippet above there is an image tag and the image is set to a width of 100 pixels. width="100"

The Img Src Attribute Example

The attribute refers to the source of the image you want to display. The img tag will not display an image without the src attribute. However, if you set the source to the location of the image, you can display any image.

There is an image of the freeCodeCamp Logo located at //avatars0.githubusercontent.com/u/9892522?v=4&s=400

You can set that as the image using the src attribute.

  Img Src Attribute Example   

The above code displays like this:

The src attribute is supported by all browsers.

You can also have a locally hosted file as your image.

For example, > > Greater-than sign < < < Less-than sign • • • Bullet point

HTML Form Example

Basically, forms are used to collect data entered by a user, which are then sent to the server for further processing. They can be used for different kinds of user inputs, such as name, email etc.

Form contains control elements which are wrapped around tags, like input, which can have types like:

• text
• email
• password
• checkbox
• radio
• submit
• range
• search
• date
• time
• week
• color
• datalist

Code example:

 Username:  Password:  Male
Female
Other Correct 

Other elements that form can contain:

• textarea - is a multiline box which is most often used for adding some text eg. comment. Size of textarea is defined by number of rows and columns.
• select - together with tag creates drop-down select menu.
• button - The button element can be used to define a clickable button.

MORE INFORMATION ON HTML FORMS.

HTML Forms are required when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.

A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

The HTML tag is used to create an HTML form and it has following syntax −

  form elements like input, textarea etc. 

If the form method is not defined then it will default to “GET”.

The form tag can also have an attribute named “target” which specifies where the link will open. It can open in the browser tab, a frame, or in the current window.

The action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to a web page at the Script URL when the user clicks on the submit button. If the action attribute is omitted, the action is set to the current page.

HTML5 Audio Example

Before HTML5, audio files had to be played in a browser using a plug-in like Adobe Flash. The HTML

The following code snippet adds an audio file with the filename tutorial.ogg or tutorial.mp3. Theelement indicates alternative audio files which the browser may choose from. The browser will utilize the first recognized format.

Example 1

   Your browser does not support the audio element. 

Example 2

The controls attribute includes audio controls like play, pause, and volume. If you don’t use this attribute, then no controls will be shown.

The element enables you to indicate alternative audio files which the browser may choose from. The browser will utilize the first recognize format. The text between the and tags may be shown in browser that does not support the HTML5 element.

The autoplay attribute will automatically play your audio file in the background. It is considered better practice to let visitors choose to play audio.

The preload attribute indicates what the browser should do if the player is not set to autoplay.

The loop attribute will play your audio file in a continous loop if mentioned

Since this is html5, some browser do not support it. You can check it at //caniuse.com/#search=audio

HTML5 Semantic Elements Example

Semantic HTML elements clearly describe it’s meaning in a human and machine readable way. Elements such as , and are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.

A Quick History

HTML was originally created as a markup language to describe documents on the early internet. As the internet grew and was adopted by more people, it’s needs changed. Where the internet was originally inteded for sharing scientific documents, now people wanted to share other things as well. Very quickly, people started wanting to make the web look nicer. Because the web was not initially built to be designed, programmers used different hacks to get things laid out in different ways. Rather than using the

az információk táblázat segítségével történő leírására a programozók felhasználnák őket más elemek elhelyezésére az oldalon. A vizuálisan megtervezett elrendezések használatának előrehaladtával a programozók elkezdtek egy általános „nem szemantikus” címkét használni . Ők gyakran adnak ezek az elemek egy classvagy idattribútumot a céljuk. Például e helyett gyakran úgy írták . Mivel a HTML5 még mindig viszonylag új, a nem szemantikai elemek ilyen használata ma is nagyon elterjedt a weboldalakon.

Új szemantikai elemek listája

A HTML5-be adott szemantikai elemek a következők:

Elements such as , , , , , and act more or less like elements. They group other elements together into page sections. However where a tag could contain any type of information, it is easy to identify what sort of information would go in a semantic region.

An example of semantic element layout by w3schools

Benefits of semantic elements

To look at the benefits of semantic elements, here are two pieces of HTML code. This first block of code uses semantic elements:

Whilst this second block of code uses non-semantic elements:

First, it is much easier to read. This is probably the first thing you will notice when looking at the first block of code using semantic elements. This is a small example, but as a programmer you can be reading through hundreds or thousands of lines of code. The easier it is to read and understand that code, the easier it makes your job.

It has greater accessibility. You are not the only one that finds semantic elements easier to understand. Search engines and assistive technologies (like screen readers for users with a sight impairment) are also able to better understand the context and content of your website, meaning a better experience for your users.

Overall, semantic elements also lead to more consistent code. When creating a header using non-semantic elements, different programmers might write this as , , , or simply . There are so many ways that you can create a header element, and they all depend on the personal preference of the programmer. By creating a standard semantic element, it makes it easier for everyone.

Since October 2014, HTML4 got upgraded to HTML5, along with some new “semantic” elements. To this day, some of us might still be confused as to why so many different elements that doesn’t seem to show any major changes.

and

“What’s the difference?”, you may ask. Both these elements are used for sectioning a content, and yes, they can definitely be used interchangeably. It’s a matter of in which situation. HTML4 offered only one type of container element, which is . While this is still used in HTML5, HTML5 provided us with and in a way to replace .

The and elements are conceptually similar and interchangeable. To decide which of these you should choose, take note of the following:

1. An article is intended to be independently distributable or reusable.
2. A section is a thematic grouping of content.

Top Stories
News
 Story 1 Story 2 Story 3   
Sport
 Story 1 Story 2 Story 3  

and

The element is generally found at the top of a document, a section, or an article and usually contains the main heading and some navigation and search tools.

Company A
    

     
Home
     
About
     
Contact us
    

The element should be used where you want a main heading with one or more subheadings.

Heading 1
Subheading 1
Subheading 2

REMEMBER, that the element can contain any content, but the element can only contain other headers, that is

to

and including .

The element is intended for content that is not part of the flow of the text in which it appears, however still related in some way. This of as a sidebar to your main content.

This is a sidebar, for example a terminology definition or a short background to a historical figure.

Before HTML5, our menus were created with

’s and
• ’s. Now, together with these, we can separate our menu items with a , for navigation between your pages. You can have any number of elements on a page, for example, its common to have global navigation across the top (in the ) and local navigation in a sidebar (in an element).

  
         
  
          
  Home
          
  About
          
  Contact us
         

  If there is a there must be a . A is generally found at the bottom of a document, a section, or an article. Just like the the content is generally metainformation, such as author details, legal information, and/or links to related information. It is also valid to include elements within a footer.

  ©Company A

  The element often appears within a or element which would usually contain copyright information or legal disclaimers, and other such fine print. However, this is not intended to make the text smaller. It is just describing its content, not prescribing presentation.

  ©Company A Date

  The element allows an unambiguous ISO 8601 date to be attached to a human-readable version of that date.

  Tuesday, 31 October 2017

  Why bother with ? While humans can read time that can disambiguate through context in the normal way, the computers can read the ISO 8601 date and see the date, time, and the time zone.

  and

  is for wrapping your image content around it, and is to caption your image.

   Cover art for Middle-earth: Shadow of Mordor 

  HTML5 Video Example

  Before HTML5, in order to have a video play in a webpage you would need to use a plugin, like Adobe Flash Player. With the introduction of HTML5, you can now place it directly into the page itself. The HTML

  To embed video file into web page, just add this code snippet and change the src of audio file.

     Your browser does not support the video element. Kindly,update it to latest version. 

  The controls attribute includes video controls, similar to play, pause, and volume.

  This feature is supported by all modern/updated browsers. However, not all support the same video file format. My recommendation for a wide range of compatibilty is MP4, as it is the most widely accepted format. There are also two other formats (WebM and Ogg) that are supported in Chrome, Firefox, and Opera.

  The element enables you to indicate alternative video files which the browser may choose from. The browser will utilize the first recognize format. In HTML5, there are 3 supported video formats: MP4, WebM, and Ogg.

  The text between the  tags will only be displayed in browsers that do not support the

  There are several different elements of the video tag, many of these explanations are based on Mozilla’s web docs (linked below). There are even more if you click the link at the bottom.

  autoplay

  “autoplay” can be set to either true or false. You set it to true by adding it into the tag, if it is not present in the tag it is set to false. If set to true, the video will begin playing as soon as enough of the video has buffered for it to be able to play. Many people find autoplaying videos as disruptive or annoying so use this feature sparingly. Also note, that some mobile browsers, such as Safari for iOS, ignore this attribute.

  poster

  The “poster” attribute is the image that shows on the video until the user clicks to play it.

  controls

  The “controls” attribute can be set to true or false and will handle whether controls such as the play/pause button or volume slider appear. You set it to true by adding it into the tag, if it is not present in the tag it is set to false.

  There are many more attributes that can be added that are optional to customize the videoplayer in the page. To learn more, click on the links below.

  HTML5 Web Storage Example

  Web storage allows web applications to store up to 5MB of information in browser storage per origin (per domain and protocol).

  Types of Web Storage

  There are two objects for storing data on the client:

  window.localStorage: stores data with no expiration date and lives until removed.

  // Store Item localStorage.setItem("foo", "bar"); // Get Item localStorage.getItem("foo"); //returns "bar"

  window.sessionStorage: stores data for one session, where data is lost when the browser / browser tab is closed.

  // Store Item sessionStorage.setItem("foo", "bar"); // Get Item sessionStorage.getItem("foo"); //returns "bar"

  Since the current implementation only supports string-to-string mappings, you need to serialize and de-serialize other data structures.

  You can do so using JSON.stringify() and JSON.parse().

  For e.g. for the given JSON

  var jsonObject = { 'one': 1, 'two': 2, 'three': 3 };

  We first convert the JSON object to string and save in the local storage:

  localStorage.setItem('jsonObjectString', JSON.stringify(jsonObject));

  To get the JSON object from the string stored in local storage:

  var jsonObject = JSON.parse(localStorage.getItem('jsonObjectString'));

  Mailto Links Example

  A mailto link is a kind of hyperlink () with special parameters that lets you specify additional recipients, a subject line, and/or a body text.

  The basic syntax with a recipient is:

  Some text

  More customization!

  Adding a subject to that mail:

  If you want to add a specific subject to that mail, be careful to add %20 or + everywhere there’s a space in the subject line. An easy way to ensure that it is properly formatted is to use a URL Decoder / Encoder.

  Adding body text:

  Similarly, you can add a specific message in the body portion of the email: Again, spaces have to be replaced by %20 or +. After the subject paramater, any additional parameter must be preceded by &

  Example: Say you want users to send an email to their friends about their progress at Free Code Camp:

  Address: empty

  Subject: Great news

  Body: I am becoming a developer

  Your html link now:

  Send mail!

  Here, we’ve left mailto empty (mailto:?). This will open the user’s email client and the user will add the recipient address themselves.

  Adding more recipients:

  In the same manner, you can add CC and bcc parameters. Seperate each address by a comma!

  Additional parameters must be preceded by &.

  Send mail!

  Thank you for using this HTML reference. Happy coding!