This document provides an introduction to HTML by covering the following key points:
- HTML uses tags to tell web browsers how to structure and display content. Tags are surrounded by angle brackets and usually come in pairs.
- To create an HTML document, you can use a text editor to write HTML code and save the file with a .html extension. Then open it in a web browser to view the formatted page.
- The basic structure of an HTML document includes <html>, <head>, and <body> tags where the <head> contains the <title> and the <body> holds the visible page content.
- Common tags in the body are headings, paragraphs, line breaks, images,
Approaches To WordPress Theme DevelopmentCatch Themes
Here I have shared my WordPress Theme Development and review experiences. In this process, I have used and learned about various approaches to WordPress theme development. Such as Starting from Scratch, Editing an Existing Theme, Parent and Child, Theme Framework and Starter Theme. I am sharing with you about TwentyEleven, Catch Box, Simple Catch, Genesis, Hybrid, Edin, Goran, Bones, Underscores, Components and other themes.
Jason Tucker Wordpress 3rd Party Web ServicesJason Tucker
started out with a quick intro on wordpress themes (I should have included how a widget works in the slides but I did discuss that which you can see in the video) then later went into something new and fresh: Facebook Connect. This tech enables you to allow your readers to login to your wordpress site using their Facebook login info. The plugin I finally settled with was the one developed by sixjumps which took the basics of just authenticating with wordpress to a new level. With this you can leave a comment on the blog and allow the comment to be sent over to facebook. You can also share links from the site to facebook with ease and lastly be able to see who else is using the site from facebook. Pretty cool stuff to be totally honest.
Later I went into some plugins to connect wordpress with Twitter: TwitterTools by Alex King, TwitMe by Johnny Mast and Tweetbacks by Joost de Valk. I love Alex and Joost's work and their plugins kick some serious ass. TwitMe and its dev are new to me but there are some great features he put into that plugin. Lastly I discussed sharing posts with friends using using Joost's plugin Sociable and ShareThis.
One thing I learned with this is the power of the masses... If your doing a presentation on social media or new media, get your audience involved by asking them to get their friends involved. At the beginning of the demo I put a tinyurl link up on the screen and asked everyone to hop on twitter and send that link out to as a tweet so we can get some people in the chatroom.
Approaches To WordPress Theme DevelopmentCatch Themes
Here I have shared my WordPress Theme Development and review experiences. In this process, I have used and learned about various approaches to WordPress theme development. Such as Starting from Scratch, Editing an Existing Theme, Parent and Child, Theme Framework and Starter Theme. I am sharing with you about TwentyEleven, Catch Box, Simple Catch, Genesis, Hybrid, Edin, Goran, Bones, Underscores, Components and other themes.
Jason Tucker Wordpress 3rd Party Web ServicesJason Tucker
started out with a quick intro on wordpress themes (I should have included how a widget works in the slides but I did discuss that which you can see in the video) then later went into something new and fresh: Facebook Connect. This tech enables you to allow your readers to login to your wordpress site using their Facebook login info. The plugin I finally settled with was the one developed by sixjumps which took the basics of just authenticating with wordpress to a new level. With this you can leave a comment on the blog and allow the comment to be sent over to facebook. You can also share links from the site to facebook with ease and lastly be able to see who else is using the site from facebook. Pretty cool stuff to be totally honest.
Later I went into some plugins to connect wordpress with Twitter: TwitterTools by Alex King, TwitMe by Johnny Mast and Tweetbacks by Joost de Valk. I love Alex and Joost's work and their plugins kick some serious ass. TwitMe and its dev are new to me but there are some great features he put into that plugin. Lastly I discussed sharing posts with friends using using Joost's plugin Sociable and ShareThis.
One thing I learned with this is the power of the masses... If your doing a presentation on social media or new media, get your audience involved by asking them to get their friends involved. At the beginning of the demo I put a tinyurl link up on the screen and asked everyone to hop on twitter and send that link out to as a tweet so we can get some people in the chatroom.
2. Contents
• Getting Started..
• What is HTML?
• How to create and View an HTML document?
• Basic HTML Document Format
• The HTML Basic tags
1999 Asian Women's Network Training Worksho
2
3. What the following term mean:
Web server: a system on the internet containg one
or more web site
Web site: a collection of one or more web pages
Web pages: single disk file with a single file name
Home pages: first page in website
Think about the followings before working
your Web pages.
Think about the sort of information(content) you want
to put on the Web.
Set the goals for the Web site.
Organize your content into main topics.
Come up with a general structure for pages and
topics.
4. What is HTML?
Telling the browser what to do, and what props to use.
A serises of tags that are integrated into a text
document.
Tags are ;
surrounded with angle brackets like this
<B> or <I>.
Most tags come in pairs
exceptions: <P>, <br>, <li> tags …
The first tag turns the action on, and the second turns it
off.
1999 Asian Women's Network Training Worksho
4
5. The second tag(off switch) starts with a forward slash.
For example ,<B> text </B>
can embedded, for instance, to do this:
<HEAD><TITLE> Your text </HEAD></TITLE> it won't work.
The correct order is <HEAD><TITLE> Your text </TITLE></HEAD>
not case sensitivity.
Many tags have attributes.
For example, <P ALIGN=CENTER> centers the paragraph following it.
Some browsers don't support the some tags and some
attributes.
1999 Asian Women's Network Training Worksho
5
6. Basic HTML Document Format
<HTML> See what it
<HEAD> looks like:
<TITLE>WENT'99</TITLE>
</HEAD>
<BODY>
Went'99
</BODY>
</HTML>
1999 Asian Women's Network Training Worksho
6
7. How to Create and View an HTML document?
1.Use an text editor such as Editpad to write the
document.
2.Save the file as filename.html on a PC. This is called
the Document Source.
3.Open Netscape (or any browser) Off-Line
4.Switch to Netscape
5.Click on File, Open File and select the filename.html
document that you just created.
6.Your HTML page should now appear just like any
other Web page in Netscape.
1999 Asian Women's Network Training Worksho
7
8. 7.You may now switch back and forth between the
Source and the HTML Document
switch to Notepad with the Document Source
make changes
save the document again
switch back to Netscape
click on RELOAD and view the new HTML
Document
switch to Notepad with the Document
Source......
1999 Asian Women's Network Training Worksho
8
9. Tags in head
<HEAD>...</HEAD>-- contains information about the
document
<TITLE>...</TITLE>-- puts text on the browser's title
bar.
1999 Asian Women's Network Training Worksho
9
10. Tags in Body
Let's talk Text
Heading: <H1> </H1>
Center:<Center> </Center>
Line Break <P> ,<Br>
Phrase Markups: <I></I> ,<B></B>
Create a List
Unordered list : <UL><li>
Ordered list: <OL><li>
Nested
1999 Asian Women's Network Training Worksho
10
11. Add Images
Use <IMG SRC=imagefilename> tags
How to specify Relative pathnames
Attributes of IMG tag
-width,height
-Alt
-Align
-<Img src=my.gif width=50 height=50 align=right
alt=“My image”>
1999 Asian Women's Network Training Worksho
11
12. Add some Link
Use <A href=filename|URL></a>tags
How to specify Relative pathnames
Kinds of URLs
-http://www.women.or.kr
- ftp://ftp.foo.com/home/foo
- gopher://gopher.myhost.com/
- news://news.nuri.net
- mailto:skrhee@women.or.kr
1999 Asian Women's Network Training Worksho
12
13. How to make colors changes?
Hexadecimal number :
Color names : <Font color=white>
Changing the Background color
<BODY BGCOLOR=#19378a>
Changing Text color
<BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66
VLINK=#66ffff>
Spot color
<FONT COLOR=#66ffcc>WENT'99</FONT>
Image Background
<BODY BACKGROUND=bgimg.gif >
1999 Asian Women's Network Training Worksho
13
14. How to specify Relative pathnames
The current HTML document is my.html and the current directory is Iam
C:- Iam -my.html
-your.html
Type this ; <A href=your.html>Your link </A>
C:- Iam -my.html
Child -your.html
Type this ; <A href=Child/your.html>Your link </A>
C:- Iam -my.html
Sister -your.html
Type this ; <A href=../Sister/your.html>Your link </A>
C:- Mother -your.html
Iam -my.html
Type this ; <A href=../your.html>Your link </A> Go to
Back
1999 Asian Women's Network Training Worksho
14
15. How to specify Relative pathnames
The HTML document is my.html and the image file is dragonfly.gif
C:- Iam -my.html ☞ Type this ; <IMG SRC=dragonfly.gif>
-dragonfly.gif
C:- Iam -my.html ☞ Type this ; <IMG SRC=Image/dragonfly.gif>
Image
-dragonfly.gif
C:- Iam -my.html ☞ Type this ; <IMG SRC=../Image/dragonfly.gif>
Image
-dragonfly.gif
C:- Image -dragonfly.gif ☞ Type this ; <IMG SRC=../dragonfly.gif>
Iam
-my.html
Go to Back
1999 Asian Women's Network Training Worksho
15