Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
HTML Basic Tutorial #1
#1
This is the 1st part for my HTML and CSS tutorial!

Were gonna start with the basics then move to more advance stuff like Bootsrap 4 or javascript and php codes in your html.

Now Lets Start.
___________________________________________________

You will always need a first line in your html file, this line will always start at the beginning and never go anywhere else, this code lets your browser know that you are using an html script. Here's the code

Code:
<!DOCTYPE html>

Now lets start with tags, all tags will have closing tags and the tags are like English they basically do what they say for expample

Code:
<center> - Centers Text
<p> - Creates Paragraph's
<link> - Link Tag
<img> - Image Tag

you should get what I mean by HTML tags do exactly what they explain.

Now lets actually make a simple website with HTML

First we will use the first line of code that I showed you.
Code:
<!DOCTYPE html>

Next I will use the HTML Tag to explain where the actually html coding starts.

Code:
<!DOCTYPE html>
<html>

Next I will use Head and Title Tags to explain where the header goes.

Code:
<!DOCTYPE html>
<html>
<head>
       <title>HTML Tutorial</head>
</head>

Closing Tags.

Closing Tags explain where the tag stops, without the closing tags the HTML document would not know where the tags end so the document wouldn't know where to stop the tag until it closes. The closing tags are the original tags but with a / in front for example
Code:
<title>Tutorial</title>

now we will make a body tag and a paragraph tag and we will close all of our tags and we will style the paragraph tag to the color Blue

Code:
<!DOCTYPE html>
<html>
<head>
        <title>HTML Tutorial</title>
</head>
<body>
<p style='color:blue'>This is a HTML Tutorial Written By DistanceDesigns</p>
</body>
</html>

Writing Notes. - Writing notes is simple this is for people with lots of code and want people to help find there code. Here's how you write a note

Code:
<!-- DistanceDesigns Made This Tutorial -->

This is a is how you link a css stylesheet, lets suppose it is in the same folder as the index.html or the .html file and suppose the css file is named global.css heres how you link it.

Code:
<link rel='stylesheet' type='text/css' href='global.css' />

using /> self closes a tag if thees nothing after it.

Next Tutorial @ Will Have

1.Nav Bar and Styling It
2. Introduction to CSS
3. Making a Responsive Web Page and More.

-DistanceDesigns

(written from scratch, all things in here are to my knowledege )
#2
Nice tutorial very helpful for those who want to least HTML!
[Image: 4.gif]
#3
Good tutorial I guess, pretty basic although.
#4
Solid basics, looks helpfull to people new to HTML, thanks for putting it together.
Check out MusicHub - a place to listen
#5
Interesting. Thanks for the basic and helpful tut OP.
#6
Good tutorial, thanks for sharing this OP.


Forum Jump:


Users browsing this thread: 1 Guest(s)


Powered by © 2002-2020 MyBB Group.
Theme by CreWix. Fixed by Tomik. Customized for Aeowulf.