More Convenient to use WordPress
WordPress is the most popular Blog nowadays. We like its powerful functions and abundant themes. Due to powerful functions, wordpress is more and more complicated operation for beginners. So, we’d like to introduce some basic knowledge below.
Html Basic Knowledge
Great HTML knowledge is maybe not useful to wordpress, but necessary for construction website. HTML is connected with texts on one computer and images on other computer. We only need to click one icon, then jump to related content.
HTML is nothing but a series of labels. It is English full name or short name, as paragraph=<p>, <blockquote>. It appears in pair, as <p>, it has to be another, as </p>, except some labels, <input>.
HTML begins as DOCTYPE and it is the declaration document. It is no content in it, otherwise, it’s invalid. It follows <html> and </html>, the title and the body are included in it.
Title is between <head> and </head> and body content is between <body> and </body>.
Now, we talk about common labels in HTML. <h1> to <h6> is defined as titles, <p> and </p> is for divide paragraphs, </br> for line break, <hr> for striping, <b> and </b> for bold font, <i> and </i> for italic. <a href=”url”></a> is for hyperlinks that points to any source file, in which title display as note. <img src=”url”/> is for insert images, in which url shows paths and file names.
There are 2 background attributes in <body> in HTML: bgcolor and background. Bgcolor is for page background color and background is for page background image. Create table used as <table>, <tr> is for row and <td> for line as:
The color and font are used as <font>, font size used for size: <p><font size=”2?></font></p>, font color used for color: <p><font color=”red”></font></p>, face for font style: <p><font face=”arial”></font></p>.
Finally, let’s talk about form element, which is the most part of HTML, is used for collect and submit user data. Such as below form:
Attribute “Action” shows where to send data when form submission, attribute “method” shows what kind of http when data transmission, attribute “type” defines what type to transfer fields, attribute “text” shows user input text, “submit” shows send data to server.
CSS Basic Knowledge
You will be very familiar with CSS if you modified theme. CSS is a powerful language, used for page style control. More know about CSS, more know how to modify wordpress theme or other plug-ins. The common attributes of CSS, as font-size control font size, color control font color, font-family control font, margin and padding control parts location, etc. CSS is named as style sheet technology, also as Cascading Style Sheet. When building page, CSS is useful as layout, font, color, background and other effects, to make pages more convenient and easy.
1.CSS Definition:
1.1 CSS defines as below:
Selector {property: value; property: value; …}
Selector has 3 style names:
html label, as <p>, <body>, etc. class id
Property: style property that to be modify, as color.
Value: property’s value, color’s value is red, as a{color:red} This example shows all links as red. Generally speaking, all defination includes in <style> label and put into <head> and </head>. The below example shows all links as red, the text background of P label as blue, text as white. (e.g. CSS1.htm)
1.1 3 Forms of CSS Selector
?1?Html selector
HTML Selector is HTML tag, as a, p, div, td, etc., also as “label: status”, as a:link. If define them as CSS, tags’ attributes shows in whole page. Such as, color of td label shows as red: “td{color:red}”
Different elements can be defined one-time by CSS, as:
“h1, h2, td{font-family:arial;font-size:20px;color:red}”
This definition shows “h1?, “h2? and “td” that have font arial, size 20px and color red. Use “label:status” define hyperlink color, example below:
<html>
<head>
<style type=”text/css”>
a:link{font-family:arial;color:blue;text-decoration:none} defines style of hyperlink text not visit: font:arial; color:blue; no underline.
a:hovor?font-family?Batang?color?red?text-decoration?underline?
defines hyperlink style when cursor on it: font:babang; color:red; underline.
A:visited{font-family:Vrinda;color:black;text-decoration?none}defines hyperlink style after visited: font:vrinda; color:black; no underline.
a:active{font-family:Arial;color:green;text-decoration:none} defines activated hyperlink style: font:arial; color:green; no underline.
</style>
</head> <body> </html>
?2?class selector
class selector controls page elements by importing class css in html element. For example, it could make some h1s to red, some to green, and different font and size, below is an example:
<html>
<head>
<style type=”text/CSS”>
h1.red{font-family:”Song”;font-size:12px;corlor:red}
h1.green{font-family:TimesNewRoman,;font-size:9px;color:green}
</style>
</head>
<body>
<h1 class=”red”> international trade</h1>
<h1 class=”green”>E-business</h1>
</body>
</html>
There is another independent class selector, which could be imported by any html labels. The grammar is .classname{property:value}, an example below:
<html>
<head>
<style type=”text/CSS”>
.red{font-family:”Song”;font-size:10px;color:red}
.green{font-family:Arial;font-size:24px;color:green}
</style>
</head>
<body>
<h1 class=”red”> international trade</h1>
<h1 class=”green”>logistics</h1>
</body>
</html>
?3?id selector
id selector has the functions with independent class selector, grammar: # idname{property:value}. Application form of html is <tag id=”idname”>, an example below:
<html>
<head>
<style type=”text/CSS”>
#redone{font-family:”Song”;font-size:10px;color:red}
#greenone{font-family:Arial;font-size:24px;color:green}
</style>
</head>
<body>
<h1 id=”redone”> international trade</h1>
<span id=”greenone”>logistics</span>
</body>
</html>
Create Text Region
Html allows <div></div>, <span></span> to create a text region, which combined with css to align the whole text. These attributes of labels are (left, right, center).
2.CSS Declaration
Before CSS, have to define CSS into <style> of <head>, which means CSS declaration. CSS has 3 following declarations:
2.1 EmbeddedCSS
Embedded CSS is defined into <style> of <head>, format:
<head>
<style type=”text/CSS”>
selector{property:value;property:value;….}
</style>
</head>
2.2 Hyperlink CSS Declaration
If css is complicated or the same css format is used into mutil-text, it could make css into .css text and quote <link> from page.
<link href=”#.css” rel=”stylesheet” type=”text/css” />
Embedded css will be style attribute of html label, format is:
<tag style=”property:value;property:value;….”>
Example: <body>
<h1 style=”font-family:arial;font-size:20px;color:red”>Financial specialist</h1>
<p style=”font-size:12pt;line-height:20pt”> international trade </p>
</body>
3.CSS Attributes
line-height
text-align
text-indent
text-transform
text-decoration
3.1 Line Space
{line-height:#}increase the space and make text more clear, line space attribute shows line times, as below:
<div style=”line-height:1?>line space 1<br> line space 1</div>
<div style=”line-height:2?> line space 2<br> line space 2</div>
<div style=”line-height:3?> line space 3<br> line space 3</div>
3.2 Text Alignment
{text-align:#} #=left,center,right
Control text will be aligned and default is left-align. For example:
<div style=”text-align:left”>left-align</div>
<div style=”text-align:center”>center-align</div>
<div style=”text-align:right”>right-align</div>
3.3 First Space in Paragraph
{text-indent:#} #= space distance
Default is pix. Use text-indent to several spaces in the first line, for example:
<div>no space in the first line</div>
<div style=”text-indent:10px”>space in the first line: 10pix</div>
<div style=”text-indent:1cm”>space in the first line: 1cm</div>
3.4 Letters of the Case
{text-transform:#} # =capitalize,uppercase,lowercase
Control capital letters, all letters capital or low case, example below:
<div style=text-transform:capitalize>abcd ef</div>
<div style=text-transform:uppercase>abcd ef</div>
<div style=text-transform:lowercase>abcd ef</div>
3.5 Text Decoration
{text-decoration:#} #=none,underline,line-through
Underline text, or line in the middle, delete underlines of links.
4. CSS Font Attributes
font-family; font-size
font-style; font-weight
4.1 font-family
{font-family:#} #=font name
Control font and value will be various fonts, example below:
<p style=”font-family:verdana”>today is Sunday.</p>
<h2 style=”font-family:Times New Roman”>
Today is Sunday</h2>
<font style=”font-family:??” size=20px>Today is Sunday</font>
4.2 font-size
{font-size:#}
#=font-size(px,pt,in,cm,%)
#=xx-small,x-small,medium,large,x-large,xx-large
Use font-size and xx.small to adjust font size. The font is generally small than 500px, example below:
<p style=”font-size:24pt”> Today is Sunday.</p>
<p style=”font-size:medium”> Today is Sunday.</p>
<font style=”font-size:10px”>Today is Sunday.</font>
<font style=”font-size:large”> Today is Sunday </font>
4.3 font-style
{font-style:#} #=normal,italic
Define italic or normal, example below:
<p style=”font=style:italic”>today is Sunday.</p>
<p style=”font=style:normal”>today is Sunday.</p>
4.4 font-weight
{font-weight:#} #=lighter,normal,bold,bolder
Define normal or bold, example below:
<p style=”font-weight:lighter”>today is Sunday.</p>
<p style=”font-weight:normal”>today is Sunday.</p>
<p style=”font-weight:bold”>today is Sunday.</p>
<p style=”font-weight:bolder”>today is Sunday.</p>
5.CSS List-style
CSS can change list labels.
{list-style-type:#}
Disorder: #=disc,circle,square,decimal
Order: #=upper-roman,lower-roman,upper-alpha,lower-alpha
6.CSS Background Control Attribute
CSS can change text attribute in page and other element background, as “p”, “div”, etc. Below are background attributes:
color
background-color
background-image
background-repeat
6.1 Font Color
{color:#}
#=rrggbb is sexadecimal or color names are: black?olive?teal?red?blue?maroon?navy?gray?lime?fuchsia?white?green?purple?silver?yellow?aqua
The attribute decide font color and line color, example below:
<div style=”color:green”>green font</div>
<hr size=”1? width=”75%” color=”#666666?><!-grayline->
6.2 Background Color
{background-color:#}
#=rrggbb is sexadecimal or color names are: black?olive?teal?red?blue?maroon?navy?gray?lime?fuchsia?white?green?purple?silver?yellow?aqua
The attribute control background color of element, for example, make font green:
<p style=”background-color:#ccefcc”>green paragraph background</p>
About wordpress basic knowledge, please check W3C manual for more information.
