Basic HTML

Everything HTML in here.
Post Reply
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Basic HTML

Adding paragraphs to your web page

Adding paragraph's to your web page, you have to include new paragraphs in <p> tags. which will look like...
<html>
<body>
<h1>JF Future Vision</h1>
<h2>Personal Hobby</h2>
<p>Web designing is one of many of the things I like to do in my personal time and to hopefully build up a career and a future in web development and design</p>
</body>
</html>
<p> Hello Everyone </p>
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Re: Basic HTML

Adding code into your main html for comments

Adding code into your main html for comments or other information within effecting the main html. In other words, support text.

Commenting allows you to leave messages without affecting the browser display. It also allows you to make code inactive. A comment in HTML starts with <!--, contains any number of lines of text, and ends with -->. For example, the comment <!-- TODO: Remove h1 --> contains the text TODO: Remove h1.
<!-- TODO: Colouring needs changing -->
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Re: Basic HTML

Finding text easier in HTML5

HTML5 has some elements that identify different content areas. These elements make your HTML easier to read and help with Search Engine Optimization (SEO) and accessibility

Identify the main section of this page by adding a <main> opening tag before the h1 element, and a </main> closing tag after the p element.
<main>
<h1>JF Future Vision</h1>
<h2>Personal Hobby</h2>
<!-- TODO: Need to add my personal photos -->
<p>Web designing is one of many of the things I like to do in my personal time and to hopefully build up a career and a future in web development and design</p>
</main>
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Re: Basic HTML

Keeping text looking good on your webpage

In the previous step, you put the h1, h2, comment, and p elements inside the main element. This is called nesting. Nested elements should be placed two spaces further to the right of the element they are nested in. This spacing is called indentation and it is used to make HTML easier to read.

The h1 element, h2 element and the comment are indented two spaces more than the main element in the code below. Use the space bar on your keyboard to add two more spaces in front of the p element so that it is indented properly as well.
<main>
<h1>CatPhotoApp</h1>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<p>See more cat photos in our gallery.</p>
</main>
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Re: Basic HTML

Adding images to your webpage

You can add images to your website by using the img element. img elements have an opening tag without a closing tag. A tag for an element without a closing tag is known as a self-closing tag.

You can add images to your webpage by using the <img></img> tags
<img></img>
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Re: Basic HTML

Adding images with links

HTML attributes are special words used inside the opening tag of an element to control the element's behavior. The src attribute in an img element specifies the image's URL (where the image is located).
All img elements should have an alt attribute. The alt attribute's text is used for screen readers to improve accessibility and is displayed if the image fails to load. For example, <img src="cat.jpg" alt="A cat"> has an alt attribute with the text A cat.
<img src="https://cdn.freecodecamp.org/curriculum ... ng-cat.jpg" alt= "A cute orange cat lying on its back">
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Re: Basic HTML

Adding a link to your webpage

You can link to another page with the anchor (a) element. For example, <a
href='https://freecodecamp.org'></a> would link to freecodecamp.org.
<a href='https://freecodecamp.org'></a>
Links with texts of your webpage

A link's text must be placed between the opening and closing tags of an anchor (a) element. For example, <a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a> is a link with the text click here to go to freeCodeCamp.org.
<a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>
Making the links open in a new window by adding a target attribute


Add a target attribute with the value _blank to the anchor (a) element's opening tag, so that the link opens in a new tab.
<p> See more <a href="https://freecatphotoapp.com"target="_blank">cat photos</a> in our gallery.</p>
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Re: Basic HTML

Adding different sections to separate things out

Adding tags into certain sections with the tags <section></section>
<section></section>
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Re: Basic HTML

Keeping images and text aligned

A figure caption (figcaption) element is used to add a caption to describe the image contained within the figure element. For example, <figcaption>A cute cat</figcaption> adds the caption A cute cat.
<figcaption>A cute cat</figcaption>
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
User avatar
ProjectX
Site Admin
Posts: 95
Joined: Thu Mar 14, 2024 10:56 pm
Location: UK, England
Contact:
Contact ProjectX

Re: Basic HTML

Attribute to send data to a certain place ( Form Action )

The action attribute indicates where form data should be sent. For example, <form action="/submit-url"></form> tells the browser that the form data should be sent to the path /submit-url.
<form action="/submit-url"></form>
BUILDING UP A PORTFOLIO FOR A BRIGHTER FUTURE!
Freelance Web development | Web Maintenance | Graphics Designer | Social Management
Top
Post Reply

Return to “HTML”