Practice
Practice copying (ctrl + c) the snippets of code and pasting (ctrl + v) in your html document.
Take a look at how the DOM and see how it is manipulated.
note: make sure to put your tagging elements between the body tags.
Defines the root of an HTML document
Defines the document's body
Defines HTML headings
The href attribute of <a> specifies the URL of the page the link goes to
The src attribute of <img> specifies the path to the image to be displayed
The width and height attributes of <img> provide size information for images
The alt attribute of <img> provides an alternate text for an image
The style attribute is used to add styles to an element, such as color, font, size, and more
The lang attribute of the <html> tag declares the language of the Web page
The title attribute defines some extra information about an element
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
<tagname style="property:value;">
Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment
Inline styling is only a good option if you are changing one or two lines of code.
Best practice will include some CSS.
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
or
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
Background
Place a background image or color in the body tag for a body background.
Update the background of a style tag for a particular element or attribute.
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Color
Color your head or paragraphs with a style tag.
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Family
Change the font family to get the exact font for the end user. Different fonts attract different users.
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Font size
Probably the most noticeable of the attributes is the size. These can be increased or decreased with percent or you can distinguish an exact size using a number and type of number.
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Text align
Certain types of layouts will require different alignments. For magazines you will generally like a justified layout, where aligned left is generally used for blogs and information.
Image descriptions generally are aligned to the right but located under the image.
Use center for titles and where it seems most appropriate.