Html Editor Tips and Tricks - Page 4

User 2073552 Photo


Registered User
1,625 posts

Mansour ... wrote:
I made this HTML5 and CSS3 very basic concepts and I hope it will be useful for new users.

http://www.feizsite.com/cc/Basic_HTML5_ … oncept.pdf

I hope my approach is well guided and if you guys see anything wrong you are welcome to comment.

Enjoy it


Where is <section>?
"An Apple doth not fall far from its tree, yet an orange does."

https://lbwebsitedesign.com - Responsive Web Design & Web Hosting Services.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
User 434929 Photo


Ambassador
938 posts

SirAGE wrote:


Where is <section>?


yeah you are right there is <section> element but pls read this link 1st http://html5doctor.com/the-section-element/

if i dont understand wrong <section> element is not for partitioning the page part. its better use <article> element instead i guess.

Pls correct me if im wrong.

thank you.
Guys at coffeecup are awesometacular.
User 2073552 Photo


Registered User
1,625 posts

Mansour ... wrote:
SirAGE wrote:


Where is <section>?


yeah you are right there is <section> element but pls read this link 1st http://html5doctor.com/the-section-element/

if i dont understand wrong <section> element is not for partitioning the page part. its better use <article> element instead i guess.

Pls correct me if im wrong.

thank you.


Yes, this is wrong... It was also done in 2009... Code is ever changing.

Granted, most of what said in there is true. :P

The <section> is to be used when you are using a <header> element.

Sections are for document outlines...

You can read more here...

http://html5doctor.com/outlines/
"An Apple doth not fall far from its tree, yet an orange does."

https://lbwebsitedesign.com - Responsive Web Design & Web Hosting Services.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
User 434929 Photo


Ambassador
938 posts

OK great I will up that soon.

I guess I need to add <p></p> <section></section> <figure></figure> as well to get more clear picture of Html 5 Basic structure.
Guys at coffeecup are awesometacular.
User 434929 Photo


Ambassador
938 posts

The Basic HTML5 lay out concept file has been updated :)

http://www.feizsite.com/cc/Basic_HTML5_ … oncept.pdf
Guys at coffeecup are awesometacular.
User 2369065 Photo


Registered User
3 posts

Kim wrote:
Eyes tired and can't see the code that well?

You can increase the font size of your code that you are viewing! From the menu select TOOLS > PREFERENCES > click CUSTOMIZE tab > click MODIFY HIGHLIGHT button

Here you can have all kinds of options to change things as you see in your code. It is a great feature you are going to love.

One of the things that's hidden in there is the character encoding used by the editor's text area. The default is ANSI, and you can type non-Latin characters in all day long and they won't show properly. If you are lucky enough to have your character set listed there, and if you have a UTF-8 fixed pitch font selected, you can mix two character sets. You have to have the right keyboards installed, of course.

If you need three or more character sets, as I sometimes have to do, then I think you're stuck.

Kudos to Kim for pointing me in the right direction. I was about ready to give up.

Unfortunately, this doesn't resolve the problem of actually rendering your page properly in a web browser.
Jerry Schwartz
User 2242497 Photo


Registered User
1 post

This may be fairly obvious, but I hope other CC users may find this useful. I often like to use my favorite text editor to edit my code. When I registered it as an external application the contents of the CC editor window was not inserted into it. When I registered it as an additional browser voila! there was the code in the text editor ready to go.
User 474778 Photo


Registered User
215 posts

Prefer to use Linux rather than Windows but insist on using the CoffeeCup HTML Editor, which CC builds only for Windows and Mac OS X? Install the Editor in a Windows virtual machine hosted by Linux! There is a bunch of new jargon to learn, but it really isn't difficult.

I'm running version 14, build 723 of the Editor on Windows 8.1, in a VirtualBox VM hosted by Ubuntu Linux 13.10. I run XAMPP 1.8.3-2 on Linux in order to view PHP-based Web work locally. Contact me at the address below this message if you'd like to see a couple of screen shots captured on this setup or want help duplicating it.

This won't save you any money. You're going to have to shell out $$$ for the Windows OS license anyway, because you'll have to see how your Web work appears on various MS-Internet Explorer versions. This requirement will last forever, since nothing on the Web ever dies, not even the 'blink' tag.

Running Windows in a VM gives you access to Linux's more robust filesystem and allows you to set up XAMPP the way it was designed to be done. Linux-side browsing locates Web site files relative to XAMPP's document root, for instance as localhost/MyProjects/. Windows-side browsing relates to Web site files relative to the Linux-based server located on the intranet, for example as //ServerName/MyProjects/.

Meanwhile, VirtualBox folder sharing supports the HTML Editor's project capability seamlessly and provides bi-directional cut & paste between Linux and Windows applications.
halfnium -AT- alum.mit.edu
Yes, I looked just like that in 1962.
User 3194203 Photo


Guest
2 posts

5 essential HTML editor tips and tricks:

1. Emmet Shortcuts
Use Emmet for faster coding:
div#container>ul>li*3 → Creates a div with an ID container, containing a ul with 3 li items.
! → Generates an HTML5 boilerplate instantly.
2. Use Live Server
Use a Live Server extension (e.g., in VS Code) to view real-time changes in your browser as you edit the code, saving you from manually refreshing the page.
3. Code Formatting
Use the auto-format feature (e.g., Alt + Shift + F in VS Code) to automatically indent and format your HTML for better readability.
4. Keyboard Shortcuts
Learn essential keyboard shortcuts for efficiency:
Open file: Ctrl + P
Multi-line edit: Ctrl + Shift + L
5. Use Comments
Add comments to organize sections of your code:
html
Copy code
<!-- Navigation Bar -->
<nav></nav>
This makes your code easier to read and maintain.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.