Skip to Main Content

Share Suggestion

Easy HTML

Web-based Resource

Easy HTML

Grade Levels

10th Grade, 11th Grade, 12th Grade, 4th Grade, 5th Grade, 6th Grade, 7th Grade, 8th Grade, 9th Grade

Course, Subject

Related Academic Standards
CC.1.4.K.U CC.1.4.K.U
With guidance and support, explore a variety of digital tools to produce and publish writing or in collaboration with peers.
CC.1.4.1.U CC.1.4.1.U
With guidance and support, use a variety of digital tools to produce and publish writing including in collaboration with peers.
CC.1.4.2.U CC.1.4.2.U
With guidance and support, use a variety of digital tools to produce and publish writing including in collaboration with peers.
CC.1.4.3.U CC.1.4.3.U
With guidance and support, use technology to produce and publish writing (using keyboarding skills) as well as to interact and collaborate with others.
CC.1.4.6.U CC.1.4.6.U
Use technology, including the Internet, to produce and publish writing as well as to interact and collaborate with others; demonstrate sufficient command of keyboarding skills to type a minimum of three pages in a single sitting.
Expand

Adapted from

PBS Teacherline

Description

J a z z i n g  u p your web based publications can be fun!

  • Please note that HTML is not case-sensitive. It can be written using either upper or lower case letters.

1) Create boldface text -- Here's how! Place the following HTML tag before the word(s) or letter(s) you want to emphasize: < b > Close up spaces between <> and the letter b. Place this tag after the word(s) or letter(s) you want set in boldface: < /b > Close up spaces. That's all!

2) C o l o r  t e x t -- Here's how! Place this tag before the words you want to color: < font color="red" > Close up spaces between the <> and the rest of the tag - -but leave the rest of the text as shown. Place this tag after the words you want to color: < /font > Close up spaces. Most of the basic colors you can think of work here: red, black, violet, blue, green, ...That's all!

3) Enlarge or reduce text size -- Here's how! Place this tag before the words you want to enlarge a bit: < font size="+1" > Close up spaces between the <> and the rest of the tag -- but leave the rest of the text as shown. Place this tag after the words you want to enlarge: < /font > Close up spaces. (Use +2 or +3 for larger and larger text; -2 for small text) That's all!

4) Italicize text -- Here's how! Place this tag before the word you want to set in italics: < i > Close up spaces. Place this tag after the word(s) you want set in italics: < /i > Close spaces. That's all!

5) Start a new paragraph--

--by skipping a line -- Here's how! Place this tag where you want the space to occur: < p > Close up spaces. That's all!.

6) Create an (indented) blockquote of text -- Here's how!

Place the < blockquote > tag before the words you want to set in a indented blockquote. Close up spaces. Place the < /blockquote >
tag after the word(s) you want set within the blockquote. Close spaces. That's all!

**Note - to make a live link or embed an image they must be stored in a public domain. You can add an image/file to your NYLearns portfolio and then choose "public".

7) Make a live link to a file, such as a picture or a Web page (the file can be attached to your content, or it can be out there on the Web) -- Here's how! Copy the link (shortcut) to the attachment or Web site onto your clipboard (Mac: click-hold; PC: right-click // Mac and PC: choose option similar to "Copy Link/Shortcut"). Paste it into your document, and use these steps to make it live!

  • Place this tag-starter before the link you've pasted in: < A HREF="
  • Place this tag-ender after the link you've pasted in: " >
  • Type in the text you want to link to the pasted URL (e.g., Cool picture)
  • Add this closing tag after the text you want to link to the pasted URL: < /a >
  • Result should read something like this: < A HREF=" http://www.coolNetLink.org/file/picturename.jpg " >Cool picture< /a >
  • Close up spaces between both sets of the <> and the rest of the tag, and between the " and the URL. That's all!

8) Make an e-mail link (Mr. Vosburgh) so people can send you messages quickly -- Here's how! Type this tag before the word you want to make into an e-mail link: < A HREF=" mailto:myemailAddress@company.com "> ; then type the word you want users to click on to send you mail; then type < /A> The result should look something like: < A HREF=" mailto:mye-mailAddress@company.com ">Send YourName some mail< /A >. Close spaces. That's all!

9) Download an image from a web page -- Here's how! (PC): RIGHT-CLICK on an image and then save to a local folder (e.g. to your computer's hard drive or to a disk) using the Save Image As... option in your browser's File menu. (MAC): CLICK and HOLD on an image. Choose "download image to disk..." which will allow you to save it to a destination of your choosing using the Save As... option in your browser's File menu. Be sure to cite where you found the image, if required. That's all!

10) Attach and embed an image so it shows up right in your content -- Here's how!

  • Find a GIF or JPG image, either on your computer or on the Web (if on Web, save it to your computer).
  • Give it a short, lower-case, no-spaces, no-extra-punctuation, file-extension name (e.g. coolpic.jpg).
  • After typing a content item, click on the Browse button in your portfolio, navigate to the picture on your computer, click Open / Attach, click OK, click Submit.
  • Re-open the post, copy the attached file's URL to clipboard: click-hold (Mac) or right-click (PC) on underlined attachment name (next to paper clip); from pop-up menu, choose option closest to Copy Link/Shortcut.
  • In the text of the message, place the cursor where you want the image to appear, paste the URL there.
  • Place this tag-starter before the link you've pasted in: < IMG SRC="
  • Place this tag-ender after the link you've pasted in: " >
  • Result should read something like this: < IMG SRC="http://2kbb3.../file/picturename.jpg" >.
  • Close up spaces between <> and the rest of the tag -- leave space between IMG and SRC. That's all!

11) Create a

  • bulleted
  • list
-- Here's how! Place the HTML tag < ul >before the items you wish to list. Place < li >before each item, including the first item, right after the < ul > tag. After your last item in the list, place the < /ul> tag to end the list. That's all!

With these skills you can work directly in a text field and still have sharp and snappy looking documents on the Web.

Loading
Please wait...

Insert Template

Information