أدوات لالتقاط وتحويل الويب

نصائح حول كتابة HTML للتحويل

تتيح لك واجهة برمجة تطبيقات GrabzIt تحويل أي HTML intس PDF ، DOCX ، الصور وأكثر من ذلك. للقيام بذلك ، تحتاج إلى تمرير HTML عادي إلى API لدينا. على سبيل المثال ، هناك شيء مثل HTML يظهر في المثال التالي.

<html>
<body>
<h1>Hello World</h1>
</body>
</html>

لاحظ أن مثال HTML هذا قد تضمن علامتي HTML و BODY ، لكن هذا ليس مطلوبًا إذا كنت ترغب فقط في تحويل مقتطف من HTML. ومع ذلك ، إذا لم تقم بإضافة علامات HTML و BODY ، فستتم إضافة هذه تلقائيًا لك تمامًا كما في المتصفح العادي. للتصدي لهذا ، يمكنك تحديد بعض CSS لإزالة أي حشوة وهوامش إضافية على علامة BODY كما هو موضح أدناه.

<style>
body{margin:0;padding:0}
</style>

إذا كنت تريد تضمين جافا سكريبت أو صور أو CSS في HTML الذي ستقوم بتحويله ، فيمكنك توفير هذه الموارد في مانور مضمن أو مرجعي. على سبيل المثال ، توضح التعليمة البرمجية أدناه كيفية إنشاء موارد في HTML بطريقة مضمنة.

<html>
<head>
<script>
document.getElementsByTagName('H1')[0].innerText = 'Goodbye';
</script>
<style>
h1{
color:red;
}
</style>
</head>
<body>
<img width="16" height="16" alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOV
SKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGA
iqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />
<h1>Hello World</h1>
</body>
</html>

كما ترى في المثال أعلاه ، يتم تضمين JavaScript و CSS مباشرة داخل صفحة HTML وكيف تم تحويل الصورة intالزراعة العضوية عنوان URL للبيانات.

إذا أردنا الرجوع إلى هذه الموارد بدلاً من ذلك ، فسوف نحتاج إلى التأكد من أن جميع عناوين URL المرتبطة بهذه الملفات تستخدم عناوين URL المطلقة ، والتي يمكن الوصول إليها أيضًا بشكل عام. هذا يعني أن عنوان URL يحتوي على جميع المعلومات اللازمة لتحديد موقع المورد. عدم استخدام عنوان URL المطلق هو السبب الرئيسي لم يتم تقديم الصور و CSS و JavaScript عند تحويل HTML.

للقيام بذلك ، يجب وضع JavaScript و CSS والصورة into قم بفصل الملفات ثم الرجوع إليها في HTML ، والتي تبدو كمثال أدناه.

<html>
<head>
<script src="http://www.example.com/myscript.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.example.com/mystyle.css">
</head>
<body>
<h1>Hello World</h1>
<img width="16" height="16" alt="star" src="http://www.example.com/star.gif" />
</body>
</html>